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本 书 详细 介绍 了 React 技术 栈 涉及 的 主要 技术 。 本 书 分 为 基础 篇 、 进 阶 篇 和 实战 篇 三 部 分 。 基 础 篇 主要 
介绍 React 的 基本 用 法 ， 包 括 React 16 的 新 特性 ， 进 阶 篇 深入 讲解 组 件 state、 虚 拟 DOM、 高 阶 组 件 等 React 
中 的 重要 概念 , 同时 对 初学 者 容易 困惑 的 知识 点 做 了 介绍 ; 实战 篇 介绍 React Router、Redux 和 MobX 3 个 React 
技术 栈 的 重要 成 员 ， 并 通过 实战 项 目 讲解 这 些 技术 如 何 和 React 结合 使 用 。 

本 书 示 例 丰 富 、 注 重 实战 ， 适 用 于 从 零 开 始 学 习 React 的 初学 者 ， 或 者 已 经 有 一 些 React 使 用 经 验 ， 但 
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希望 更 加 全 面 、 深 入 理解 React 技术 栈 的 开发 人 员 。 阅 读本 书 ， 需 要 先 掌握 基础 的 前 端 开发 知识 。 
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推荐 序 


小 时 候 ， 老 师 问 大 家 长 大 的 理想 是 什么 。 我 记得 曾 自豪 地 说 一 一 工程 师 。 后 来 ， 真 的 走 进 了 
计算 机 领域 ， 成 为 一 名 软件 工程 师 。 在 学 校 里 学 的 都 是 基础 课 ， 记 忆 犹 新 的 有 计算 机 原理 、 操 作 系 
统 、 编 译 原理 、 数 据 结 构 和 算法 等 ， 感 觉 是 终身 受益 ， 就 像 练 武功 ， 都 要 练 好 弓 、 马 、 仆 、 虚 、 鞭 
5 种 基本 步 型 一 样 。 


那 时 并 没有 前 端的 说 法 。 人 机 界面 开始 主要 以 程序 员 使 用 为 主 ， 通 过 黑洞 洞 的 Terminal 来 编 
程 ， 程 序 员 还 乐此不疲 。 后 来 出 现 了 第 一 波 突破 一 一 各 种 图 形 界面 ，PC 变 得 亲民 。 而 以 iPhone 带 
领 的 移动 终端 的 第 二 波 革 新 让 用 户 能 够 通过 触摸 、 视觉 和 声音 真正 自然 地 与 设备 交互 。 将 来 必然 拥 
有 超越 触摸 、 视 觉 和 声音 识别 的 技术 ， 属 于 传感器 和 物 联 网 的 时 代 。 这 种 技术 使 用 传感器 和 人 工 智 
能 识别 身体 运动 、 温 度 变 化 和 其 他 环境 要 素 , 并 据 此 做 出 回应 , 使 得 设备 看 起 来 可 以 读 懂 内 心 的 想 
法 一 样 。 在 不 久 的 将 来 ， 一 个 传感器 阵列 能 够 提供 高 度 的 情境 感知 ， 并 且 协 同 工 作 ， 收 集 和 处 理 关 
于 周边 环境 的 信息 , 通过 人 工 智 能 预测 需求 并 做 出 完全 个 性 化 的 安排 。 前端 工程 师 的 使 命 也 随 着 人 
机 交互 的 显著 进步 而 不 断 拓 展 。 


时 光 回 到 刚 工作 时 的 2000 年 ， 正 值 互联 网 的 发 展 初期 ， 作 为 一 名 软件 工程 师 ， 解 决 问题 就 是 
关键 ， 对 于 前 后 端 编程 都 需要 熟悉 。 当 时 ， 前 端 编程 的 核心 技能 有 HIML、CSS、JavaSeript， 对 
于 习惯 逻辑 思维 的 工程 师 ， 学 起 来 并 不 算 难 。 随 着 互联 网 的 发 展 ， 特 别 是 2010 年 后 ， 移 动 设备 成 
为 主流 ， 前 端 工程 师 角 色 被 行业 认可 ， 并 且 越 来 越 重 要 ， 涵 盖 多 终端 的 视觉 和 交互 的 实现 ， 面 对 的 
是 软件 工程 的 一 个 持久 的 挑战 一 一 人 机 交互 。 首 先 ， 人 机 交互 是 软件 产品 里 变化 最 频繁 的 部 分 ， 同 
时 是 非常 关键 的 一 环 。 其 次 ， 兼 容 各 种 浏览 器 、Web 的 标准 ， 以 及 适 配 多 种 终端 ， 都 是 很 大 的 挑 
战 。 另 外 ， 前 端 领域 的 技术 发 展 也 越 来 越 快 ， 各 种 新 的 思想 、 设 计 模 式 、 工 具 和 平台 不 断 出 现 ， 怎 
样 快 速 学 习 、 在 不 同 场景 下 做 出 恰当 的 选择 是 成 为 一 位 优秀 前 端 工程 师 必 备 的 素质 。 许 多 人 机 交互 
问题 有 非常 巧妙 的 思路 和 精彩 的 解决 办 法 。 不 得 不 说 , 前 端 工程 师 在 工程 师 群体 里 属于 非常 有 创造 
力 、 想 象 力 的 一 群 人 。 


前 端 领域 各 种 新 技术 、 新 思想 不 断 涌现 ，AngularJS、React、Vuejs、Nodejs、ES 6、ES 7、 
CoffeeScript、TypeScript， 令 人 眼花 综 乱 。 对 于 许多 开发 者 ， 估 计 还 没 学 明白 一 样 技术 ， 就 发 现 其 
已 被 另 一 些 新 的 技术 取代 而 “过 时 ”了 。 但 是 ， 如 果 退 一 步 来 看 ， 前 端的 基本 功 仍然 是 HTML、 
CSS、JavaScript， 还 有 算法 、 数 据 结构 、 编 译 原 理 。 这 一 点 ， 有 点 像 《 笑 做 江湖》 里 ,令狐冲 一 旦 
领悟 了 独孤 九 剑 ， 永 远 能 够 无 招 胜 有 招 。 


除了 具备 扎实 的 基本 功 之 外 ， 一 个 优秀 的 前 端 工程 师 必 须要 有 自己 擅长 的 领域 ， 并 且 钻 研 得 
足够 深入 , 只 有 花 时 间 学 习 成 体系 的 知识 才能 从 中 总 结 出 规律 并 形成 方法 论 , 从 而 最 大 化 学 习 的 价 
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值 。 同时 要 有 广泛 的 视野 , 不 能 局 限于 前 端 本 身 ， 因 为 有 很 多 东西 只 有 站 在 前 端 之 外 才能 看 得 更 清 
晰 、 更 透彻 。 例 如 ，React 集 成 了 许多 后 端的 优秀 理念 ， 包 括 采 用 声明 范式 轻松 描述 应 用 、 通 过 抽 
象 DOM 来 达到 高 效 的 编程 。 围绕 React 还 出 现 了 许多 工具 和 框架 ,形成 了 React 生态 。React 逐渐 
从 最 早 的 UI 引擎 变 成 了 前 后 通 吃 的 Web App 解决 方案 , 衍生 出 来 的 React Native 又 实现 了 用 Web 
App 的 方式 去 写 Native App。 这 样 , 同一 组 人 写 一 次 UI 就 能 运行 在 浏览 器 、 移 动 终端 和 服务 器 上 。 


作为 智能 物 联 网 先锋 的 远景 智能 ， 一 直 崇 尚 工程 师 文化 和 工匠 精神 ， 非 常 强调 基本 功 、 专 业 
深度 以 及 跨 界 创新 。 前 端 团 队 徐 超 写 的 《React 进 阶 之 路 》， 内 容 由 浅 入 深 ， 再 结合 实战 ， 很 像 我 
读 大 一 时 的 Java 101 课程 的 教材 ， 对 于 需要 学 习 React 的 读者 是 一 部 非常 好 的 参考 书 。 读 这 本 书 ， 
最 好 的 方法 是 领悟 其 精髓 ,掌握 软件 设计 之 路 , 灵活 使 用 以 解决 问题 。 工 程 师 不 能 因为 太 细 的 学 科 
限制 了 自己 的 思维 ， 也 不 能 像 大 公司 一 个 工作 一 个 螺丝 钉 ， 在 很 窄 的 领域 里 重复 劳动 。 工 程 师 天 生 
是 发 现 问题 、 解 决 问题 、 优 化 问题 的 。 达 。 芬 奇 、 特 斯 拉 之 所 以 是 完美 的 工程 师 ， 因 为 他 们 会 掌握 
各 种 学 科 ， 融 合并 创新 ， 在 解决 问题 的 同时 开创 先河 。 未 来 的 信息 化 世界 就 是 要 不 断 地 聪明 学 习 
融合 各 种 学 科 ， 通 过 实践 解决 问题 ， 奇 思 妙 想 地 创造 技术 的 进步 。 


计算 机 的 不 同 语言 、 不 同 技术 和 算法 就 好 比 一 堆 便宜 或 者 昂贵 的 工具 (如 锥 子 和 人 蚀 子 ) ， 其 
实 这 些 都 不 重要 ， 因 为 大 家 都 忽略 了 ,做 出 漂亮 器 具 的 是 那个 工匠 ， 而 不 是 工具 。 脑 子 里 的 经 验 积 
累 、 天 赋 、 执 着 与 认真 的 态度 、 不 停 尝试、 追求 完美 的 态度 ， 加 起 来 才能 创造 好 的 作品 与 产品 。 计 
算 机 语言 就 像 赛车 场 上 的 跑车 , 换 了 车 队 和 跑车 , 舒 马赫 还 是 Fl 车 神 , 观众 还 是 会 为 其 欢呼 雀跃 ， 
正 因为 车 神 掌握 了 与 跑车 和 赛 道 的 沟通 之 道 ! 


远景 智能 技术 副 总 裁 、 前 阿里 巴巴 集团 淘宝 CTO 
余 海峰 


了 


前 


当今 ， 前 端 应 用 需要 解决 的 业务 场景 正 变 得 越 来 越 复杂 ， 这 也 直接 推动 了 前 端 技术 的 迅 
速 发 展 ， 各 种 框架 和 类 库 日 新 月 异 、 层 出 不 穷 。 面 对 众多 的 框架 和 类 库 ， 前 端 开发 者 可 能 感到 
眼花 练 乱 , 但 换 一 个 角度 来 看 , 这 未 尝 不 是 一 种 百家争鸣 的 现象 ,不同 框 架 和 类 库 的 设计 思想 
和 设计 理念 各 有 千秋 , 解决 的 问题 也 有 所 不 同 , 这 些 多 元 化 和 差异 化 不 断 推动 前 端 技术 的 发 展 ， 
同时 也 是 前 端 技术 领域 的 一 份 思想 瑰宝 。 

React 作为 当今 众多 新 技术 的 一 个 代表 , 由 Facebook 开源 , 致力 于 解决 复杂 视图 层 的 开发 
问题 ， 它 提出 一 种 全 新 的 UI 组 件 的 开发 理念 ， 降 低 了 视图 层 的 开发 复杂 度 ， 提 高 了 视图 层 的 
开发 效率 ， 让 页 面 开 发 变 得 简单 、 高 效 、 可 控 。 此 外 ，React 不 仅 是 单一 的 类 库 ， 更 是 一 个 技 
术 栈 生态 ， 可 以 和 生态 中 的 Redux、MobX 等 其 他 技术 结合 使 用 ， 构 建 可 扩展 、 易 维护 、 高 性 
能 的 大 型 Web 应 用 。 


本 书 内 容 


本 书 涵盖 React 技术 栈 中 的 主要 技术 ， 内 容 由 浅 到 深 。 本 书 内 容 分 为 基础 篇 、 进 阶 篇 和 实 
战 篇 ， 每 一 篇 内 容 又 分 成 若干 章节 来 介绍 。 

基础 篇 ， 介 绍 了 React 的 基本 概念 ， 包 括 React 的 开发 环境 和 开发 工具 、React 的 基本 用 
法 和 React 16 的 新 特性 。 每 个 知识 点 都 有 配套 的 项 目 示例 。 

进 阶 篇 ， 深 入 介绍 了 React 的 几 个 重要 概念 ， 如 组 件 state、 虚 拟 DOM、 高 阶 组 件 等 ， 此 
外 ， 还 针对 初学 者 使 用 React 时 容易 产生 困惑 的 知识 点 做 了 专门 讲解 ， 如 组 件 与 服务 器 通信 、 
组 件 之 间 通 信 、 组 件 的 ref 属性 等 。 

实战 篇 ， 介 绍 了 React 技术 栈 中 最 重要 的 三 个 技术 : React Router、Redux 和 MobX， 每 一 
个 技术 都 配 有 详细 的 项 目 实战 示例 。 

本 书 章 节 的 难度 逐步 递增 ， 各 章节 的 知识 存在 依赖 关系 ， 所 以 读者 需 按照 章节 顺序 阅读 
本 书 , 不 要 随意 跳跃 章节 , 尤其 是 在 阅读 实战 篇 时 , 务必 保证 已 经 掌握 了 基础 篇 和 进 阶 篇 的 内 
容 ， 否 则 ， 阅 读 实 战 篇 可 能 会 有 些 吃力 。 


本 书 特点 


本 书 的 特点 是 内 容 全 、 知 识 新 、 实 战 性 强 。 

内 容 全 : 本 书 不 仅 详细 介绍 了 React 的 使 用 ， 还 详细 介绍 了 React 技术 栈 中 最 常用 的 其 他 
相关 技术 : ReactRouter、Redux 和 MobX。 

知识 新 : 本 书 介 绍 的 知识 点 都 是 基于 各 个 框架 、 类 库 当 前 的 最 新 版 本 ， 尤 其 是 涵盖 React 
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16 的 新 特性 和 React Router 4 的 介绍 。 对 于 新 版 本 已 经 不 再 支持 或 建议 废弃 的 特性 , 本 书 不 会 
再 介绍 ， 确 保 读者 所 学 知识 的 时 效 性 。 

实战 性 强 : 本 书 配 有 大 量 示例 代码 ， 保 证 读者 学 以 致 用 。 实 战 篇 使 用 的 简易 BBS 项 目 示 
例 接 近 真 实 项 目 场景 , 但 又 有 所 简化 , 让 读者 既 可 以 真正 理解 和 领会 相关 技术 在 真实 项 目 中 的 
使 用 方式 ， 又 不 会 因为 示例 项 目 过 于 复杂 而 影响 学 习 。 


本 书目 标 读者 


本 书面 向 希望 从 零 开 始 学 习 React 的 初学 者 ， 或 者 已 经 有 一 些 React 使 用 经 验 ， 希 望 更 加 
全 面 、 深 入 理解 React 技术 栈 的 开发 人 员 。 


示例 代码 


本 书 的 示例 代码 下 载 地 址 为 https://github.com/xuchaobei/react-book。 如 果 读 者 
发 现代 码 或 者 书 中 的 错误 ， 可 以 直接 在 该 代码 仓库 提交 issue。 

本 书 中 默认 的 开发 环境 是 Node.js v8.4.0， 书 中 介绍 到 的 几 个 主要 库 的 版 本 分 别 为 React 
16.1.1、React Router 4.2.2、Redux 3.7.2 及 MobX 3.3.1。 
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初 识 React 


当今 ，Web 应 用 的 业务 场景 正在 变 得 越 来 越 复杂 ， 几 乎 所 有 应 用 都 在 尝试 或 者 已 经 在 Web 上 
使 有 用， 同时， 用 户 对 Web 应 用 的 体验 要 求 也 越 来 越 高 ， 这 一 切 都 给 前 端 开发 人 员 开发 前 端 界 面 带 
来 了 巨大 的 挑战 。 而 Facebook 开源 的 React 技术 创造 性 地 提出 了 一 种 全 新 的 UI 开发 理念 ， 让 UI 
开发 变 得 简单 、 高 效 、 可 控 。React 自 开源 以 来 ， 迅 速 风靡 整个 前 端 世界 ， 推 动 前 端 开发 有 了 革命 
性 的 进步 。 


1.1 React 简介 


前 端 UI 的 本 质问 题 是 如 何 将 来 源 于 服务 器 端的 动态 数据 和 用 户 的 交互 行为 高 效 地 反映 到 复杂 
的 用 户 界面 上 。React 另辟蹊径 ， 通 过 引入 虚拟 DOM、 状 态 、 单 向 数据 流 等 设计 理念 ， 形 成 以 组 
件 为 核心 ， 用 组 件 搭建 UI 的 开发 模式 ， 理 顺 了 UI 的 开发 过 程 ， 完 美 地 将 数据 、 组 件 状态 和 UI 映 
射 到 一 起 ， 极 大 地 提高 了 开发 大 型 Web 应 用 的 效率 。 

React 的 特点 可 以 归结 为 以 下 4 点 : 


《1) 声明 式 的 视图 层 。 使 用 React 再 也 不 需要 担心 数据 状态 和 视图 层 交错 纵横 在 一 起 了 。React 
的 视图 层 是 声明 式 的 ， 基 于 视图 状态 声明 视图 形式 。 但 React 的 视图 层 又 不 同 于 一 般 的 HTML 模板 ， 
它 采 用 的 是 JavaScript (JSX) 语法 来 声明 视图 层 ， 因 此 可 以 在 视图 层 中 随意 使 用 各 种 状态 数据 。 

(2) 简单 的 更 新 流程 。React 声明 式 的 视图 定义 方式 有 助 于 简化 视图 层 的 更 新 流程 。 你 只 需 
要 定义 UI 状态 ，React 便 会 负责 把 它 泻 染 成 最 终 的 UI。 当 状态 数据 发 生变 化 时 ，React 也 会 根据 
最 新 的 状态 泻 染 出 最 新 的 UI。 从 状态 到 UI 这 一 单 向 数据 流 让 React 组 件 的 更 新 流程 清晰 简洁 。 
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(3) 灵活 的 泻 染 实现 。React 并 不 是 把 视图 直接 演 染 成 最 终 的 终端 界面 ， 而 是 先 把 它们 演 染 
成 虚拟 DOM。 虚 拟 DOM 只 是 普通 的 JavaScript 对 象 ， 你 可 以 结合 其 他 依赖 库 把 这 个 对 象 泻 染 成 
不 同 终端 上 的 UI。 例如 , 使 用 react-dom 在 浏览 器 上 渲染 ,使 用 Node 在 服务 器 端 演 染 ， 使 用 React 
Native 在 手机 上 演 染 。 本 书 主要 以 React 在 浏览 器 上 的 泻 染 为 例 介绍 React 的 使 用 ， 但 你 依然 可 以 
很 容易 地 把 本 书 的 知识 应 用 到 React 在 其 他 终端 的 泻 染 上 。 

(4) 高 效 的 DOM 操作 。 我 们 已 经 知道 虚拟 DOM 是 普通 的 JavaScript 对 象 ， 正 是 有 了 虚拟 
DOM 这 一 隔离 层 ， 我 们 再 也 不 需要 直接 操作 又 笨 又 慢 的 真实 DOM 了 。 想 象 一 下 ， 操 作 一 个 
JavaScript 对 象 比 直接 操作 一 个 真实 DOM 在 效率 上 有 多 么 巨大 的 提升 。 而 且 ， 基 于 React 优异 的 
差异 比较 算法 ，React 可 以 尽量 减少 虚拟 DOM 到 真实 DOM 的 泻 染 次 数 ， 以 及 每 次 泻 染 需要 改变 
的 真实 DOM 节点 数 。 


虽然 React 有 这 么 多 强大 的 特性 , 但 它 并 不 是 一 个 MVC 框架 。 从 MVC 的 分 层 来 看 , React 相 
对 于 V 这 一 层 ， 它 关注 的 是 如 何 根据 状态 创建 可 复 用 的 UI 组件 ， 如 何 根 据 组 件 创建 可 组 合 的 UI。 
当 应 用 很 复杂 时 ，React 依然 需要 结合 其 他 库 〈 如 Redux、MobX 等 ) 使 用 才能 发 挥 最 大 作用 。 


1.2 ES 6 语法 简介 


ES 6 是 JavaScript 语言 的 新 一 代 标准 ， 加 入 了 很 多 新 的 功能 和 语法 。React 的 项 目 一 般 都 是 用 
ES 6 语法 来 写 的 ， 这 也 是 Facebook 官方 推荐 的 方式 。 为 保证 本 书 知识 体系 的 完整 性 ， 本 节 我 们 会 
对 开发 React 应 用 经 常用 到 的 ES 6 语法 做 简要 介绍 。 


1. let、const 


let 和 const 是 ES 6 中 新 增 的 两 个 关键 字 ， 用 来 声明 变量 ，let 和 const 都 是 块 级 作用 域 。let 声 
明 的 变量 只 在 let 命令 所 在 的 代码 块 内 有 效 。const 声明 一 个 只 读 的 常量 ， 一 旦 声明 ， 常 量 的 值 就 不 
能 改变 。 例 如 : 
// let 示例 
{ 
Var a= 1; 
let p=2 
} 
a RAR 


b // ReferenceError: b is not defined. 


//const 示例 


const c= 3; 

c= 47 //TypeError: Assignment to constant variable. 
多半 

2. 箭头 函数 


ES 6 允许 使 用 “箭头 ” (=>) 定义 函数 。 这 种 方式 创建 的 函数 不 需要 function 关键 字 ， 并 且 
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还 可 以 省 略 retum 关键 字 。 同 时 ， 箭 头 函数 内 的 this 指向 函数 定义 时 所 在 的 上 下 文 对 象 ， 而 不 是 函 
数 执行 时 的 上 下 文 对 象 。 例 如 : 


var f=a=>a+l; 

// 等 价 于 

var f = function(a)1{ 
return a + 17 


} 


function foo(){ 
this.bar = 1; 
this.f = (a) => a + this.bar; 

} 

// 等 价 于 

function foo(){ 
this.bar = 1; 
this.f = (function(a){ 

return a + this.bar 

}) .bind (this); 

} 


如 果 箭 头 函数 的 参数 多 于 1 个 或 者 不 需要 参数 ， 就 需要 使 用 一 个 圆 括号 代表 参数 部 分 。 例 如 : 


var = () => 1; 


var f = (a, b) => a + b; 


如 果 函 数 体内 包含 的 语句 多 于 一 条 ,就 需要 使 用 大 括号 将 函数 体 括 起 来 ,使 用 return 语句 返回 。 
例如 : 


var £ = (x, y) => { 





+ 二 > 

有 学 

return x + Y7 
} 


3. 模板 字符 串 

模板 字符 串 是 增强 版 的 字符 串 ， 用 反 引 号 〈`) 标识 字符 串 。 除 了 可 以 当 作 普通 字符 串 使 用 外 ， 
它 还 可 以 用 来 定义 多 行 字符 串 ， 以 及 在 字符 串 中 嵌入 变量 ， 功 能 很 强大 。 例 如 : 

// 普 通 字符 串 


‘React is wonderful !~ 


// 多 行 字符 串 
"US is wonderful ! 


React is wonderful! 
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// 字 符 串 中 嵌入 变量 
Var name = "React"; 


'Hello, ${name} !'; 

4. 解构 赋值 

ES 6 允许 按照 一 定 模式 从 数组 和 对 象 中 提取 值 ， 对 变量 进行 赋值 ， 这 被 称 为 解构 。 例 如 : 
// 数 组 解构 


let [arbvcl = [1, 2, 3]; 
起 YA 
b /2 
© ff3 


// 对 象 解构 

let name = 'Lily'; 

let age = 4; 

let person = {name, age}; 


person // Object {name: "Lily", age: 4} 


// 对 象 解构 的 另 一 种 形式 

let person = {name: 'Lily', age: 4}; 
let {name, age} = person; 

name // "Lily" 

age //4 


函数 的 参数 也 可 以 使 用 解构 赋值 。 例 如 : 
// 数 组 参数 解构 


function sum ([x, y]) { 
return x + Y7 

} 

sum([1, 2]); // 3 


// 对 象 参数 解构 

function sum ({x, y}) { 
return x + Y7 

} 

sum({x:1, y:2}); // 3 


解构 同样 适用 于 嵌 套 结构 的 数组 或 对 象 。 例 如 : 


// 嵌 套 结构 的 数组 解构 

let [a, [bl], c] = [1, [2], 3]; 
ar //1 

br /2 

er /3 


第 1 章 初 识 React 7 





// 媒 套 结构 的 对 象 解构 
let {person: {name, age}, foo0} = {person: {name: 'Lily', age: 4}, foo: 'foo'}; 


name //"Lily" 


age //4 
foo //"foo" 
5. rest 参数 


ES 6 引入 rest 参数 形式 为 .变量 名 ) 用 于 获取 函数 的 多 余 参 数 ， 以 代 蔡 arguments 对 象 的 使 
用 。rest 参数 是 一 个 数组 ， 数 组 中 的 元 素 是 多 余 的 参数 。 注 意 ，rest 参数 之 后 不 能 再 有 其 他 参数 。 
例如 : 


function languages(lang, ...types){ 
console.log (types); 
} 
languages ('Javascript', 'Java', 'Python'); //["Java", "Python"] 


6. 扩展 运算 符 
扩展 运算 符 是 三 个 点 〈…) ， 它 将 一 个 数组 转 为 用 逗号 分 隔 的 参数 序列 ， 类 似 于 rest 参数 的 逆 
运算 。 例 如 : 


function sum(a, b, c){ 
returna+b+c; 


} 


let numbers = [1, 2, 3]; 

sum(...numbers); //6 

扩展 运算 符 还 常用 于 合并 数组 以 及 与 解构 赋值 结合 使 用 。 例 如 : 
// 合 并 数组 

aet arrl = [a’]s 

let arr2 = ['b', 'c']; 

et arr3 = td's "erls 

i fa Sb ene "ds. Movyy 
// 与 解构 赋值 结合 

iet [Ay oT68tl = tay bis oir 


rest //['b', 'c'] 
扩展 运算 符 还 可 以 用 于 取出 参数 对 象 的 所 有 可 遍历 属性 ， 复 制 到 当前 对 象 之 中 。 例 如 : 


let bar = {a: 1, b: 2}; 

let foo = {...bar}; 

foo //Object {a: 1, b: 2}; 
foo === bar //false 
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7. class 

ES 6 引入 了 class (类 ) 这 个 概念 ， 新 的 class 写法 让 对 象 原型 的 写法 更 加 清晰 ， 也 更 像 传统 的 
面向 对 象 编程 语言 的 写法 。 例 如 : 

// 定 义 一 个 类 


class Person { 


constructor (name, age) { 


this.name = name; 
this.age = age; 

} 

getName (){ 


return this.name; 


} 


getage () { 
return this.age; 
} 
} 


// 根 据 类 创建 对 象 


let person = new('Lily', 4); 
class 之 间 可 以 通过 extends 关键 字 实 现 继承 ， 例 如 : 


class Man extends Person 1{ 
constructor (name, age) { 
super (name, age); 


} 


getGender() { 
return "male'7 
} 
} 


let man = new Man('Jack', 20); 

8. import、export 

ES 6 实现 了 自己 的 模块 化 标准 , ES 6 模块 功能 主要 由 两 个 关键 字 构 成 : export 和 import。export 
用 于 规定 模块 对 外 暴露 的 接口 ，import 用 于 引入 其 他 模块 提供 的 接口 。 例 如 : 

//a.js， 导 出 默认 接口 和 普通 接口 


const foo = () => 'foo'; 


const bar = () => 'bar'; 
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export default foo; // 导 出 默认 接口 
export {bar}; // 导 出 普通 接口 


//b.js( 与 a.js 在 同一 目录 下 ) ， 导 入 a.js 中 的 接口 
// 注 意 默认 接口 和 普通 接口 导入 写法 的 区 别 

import foo, {bar} from './a'; 

foo () 7 闫 7 六 人 天 

bar() 7 FE be ced 


本 节 介绍 的 ES 6 语法 是 后 面 我 们 介绍 React 时 经 常用 到 的 语法 ， 且 只 介绍 了 最 基本 的 用 法 ， 
如 果 读 者 想 了 解 ES 6 完整 的 语法 知识 ， 请 自行 查阅 相关 文档 学 习 。 


1.3 ”开发 环境 及 工具 介绍 


“ 工 欲 善 其 事 ， 必 先 利 其 器 ”。 开 发 React 应 用 需要 一 个 由 众多 开发 工具 组 建成 的 开发 环境 ， 
这 个 复杂 的 开发 环境 也 大 大 提高 了 应 用 的 开发 和 调试 效率 。 本 节 将 简要 介绍 本 书 使 用 到 的 相关 开发 
工具 。 


1.3.1 基础 环境 


1.，Nodejs 


Nodejs 是 一 个 JavaScript 运行 时 ， 它 让 JavaScript 在 服务 器 端 运行 成 为 现实 。React 应 用 的 执 
行 并 不 依赖 于 Node.js 环境 ， 但 React 应 用 开发 编译 过 程 中 用 到 的 很 多 依赖 〈 例 如 NPM、Webpack 
等 ) 都 是 需要 Node.js 环境 的 。 所 以 ， 在 开发 React 应 用 前 ， 需 要 先 安装 Node.js。Node.js 的 官方 
下 载 地 址 为 https://nodejs.org。 本 书 使 用 的 Nodejs 的 版 本 号 为 v8.4.0， 建 议 读者 安装 的 Nodejs 的 
版 本 不 要 低 于 本 书 使 用 的 版 本 。 


2. NPM 


NPM 是 一 个 模块 管理 工具 ， 用 来 管理 模块 的 发 布 、 下 载 及 模块 之 间 的 依赖 关系 。 开 发 React 
应 用 时 ， 需 要 依赖 很 多 其 他 的 模块 ， 这 些 模块 就 可 以 通过 NPM 下 载 。NPM 已 经 集成 到 Node.js 的 
安装 包 中 ， 所 以 不 需要 单独 安装 。 另 外 ，Facebook 联合 Exponent、Google 和 Tilde 共同 推出 了 另 一 
个 模块 管理 工具 Yam (https://yarnpkg.com) ， 可 以 作为 NPM 的 替代 工具 。 本 书 使 用 的 是 NPM。 


1.3.2 辅助 工具 


1. Webpack 


Webpack 是 用 于 现代 JavaScript 应 用 程序 的 模块 打包 工具 。Webpack 会 递归 地 构建 一 个 包含 应 
用 程序 所 需 的 每 个 模块 的 依赖 关系 图 ， 然 后 将 所 有 模块 打包 到 少量 文件 中 。Webpack 不 仅 可 以 打 
包 JS 文 件 ,配合 相关 插件 的 使 用 , 它 还 可 以 打包 图 片 资源 和 样式 文件 , 已 经 具备 一 站 式 的 JavaScript 
应 用 打包 能 力 。Webpack 本 身 就 是 一 个 模块 ， 因 此 可 以 通过 NPM 等 模块 管理 工具 安装 。 
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2. Babel 


我 们 已 经 提 到 , React 应 用 中 会 大 量 使 用 ES 6 语法 , 但 是 目前 的 浏览 器 环境 并 不 完全 支持 ES 6 
语法 。Babel 是 一 个 JavaScript 编译 器 ， 它 可 以 将 ES 6 及 其 以 后 的 语法 编译 成 ES 5 的 语法 ， 从 而 
让 我 们 可 以 在 开发 过 程 中 尽情 使 用 最 新 的 JavaScript 语法 ， 而 不 需要 担心 代码 无 法 在 浏览 器 端 运 行 
的 问题 。Babel 一 般 会 和 Webpack 一 起 使 用 , 在 Webpack 编译 打包 的 阶段 , 利用 Babel 插件 将 ES 6 
及 其 以 后 的 语法 编译 成 ES 5 语法 。 


3. ESLint 


ESLint 是 一 个 插件 化 的 JavaScript 代码 检测 工具 ， 它 既 可 以 用 于 检查 常见 的 JavaScript 语法 错 
误 , 又 可 以 进行 代码 风格 检查 , 从 而 保证 团队 内 不 同 开发 人 员 编写 的 代码 都 能 遵循 统一 的 代码 规范 。 
使 用 ESlint 必须 要 指定 一 套 代码 规范 的 配置 , 然后 ESlint 就 会 根据 这 套 规范 对 代码 进行 检查 。 目 前 ， 
业内 比较 好 的 规范 是 Airbnb 的 规范 ， 但 这 套 规范 过 于 严格 ， 并 不 一 定 适合 所 有 团队 。 在 实际 使 用 
时 ， 可 以 先 继承 这 套 规范 ， 然 后 在 它 的 基础 上 根据 实际 需求 对 规范 进行 修改 。 


4. 代码 编辑 器 


你 可 以 在 任何 编辑 器 上 编写 React 应 用 的 代码 ， 但 一 款 好 的 编辑 器 能 大 大 提高 你 的 开发 效率 。 
本 书 推荐 使 用 微软 出 品 的 Visual Studio Code (简称 VS Code) ， 它 的 操作 简洁 、 功 能 强大 ， 本 书 中 
的 示例 代码 均 在 VS Code 中 完成 ， 读 者 可 自行 到 官方 网 站 下 载 安装 ， 地 址 为 : 
https://code.visualstudio.com。 此 外 ，Sublime Text、Atom 和 WebStorm 也 是 使 用 较 多 的 代码 编辑 器 。 


1.3.3 Create React App 


Webpack、Babel 等 工具 是 开发 React 应 用 所 必需 的 ， 但 这 些 工 具 的 使 用 方法 又 比较 烦琐 ， 尤 
其 是 Webpack 的 使 用 ， 需 要 大 量 篇 幅 才能 介绍 清楚 。 为 了 避免 读者 还 没有 开始 使 用 React， 就 被 各 
种 辅助 工具 的 使 用 搞 得 “头晕 目 上 防 ”， 本 书 借助 React 官方 提供 的 脚手架 工程 Create React App 

(https://github.com/facebookincubator/create-react-app) 创建 React 应 用 。Create React App 基于 最 佳 
实践 ,将 Webpack、Babel、ESlint 等 工具 的 配置 做 了 封装 ， 使 用 Create React App 创建 的 项 目 无 须 
进行 任何 配置 工作 ， 从 而 使 开发 者 可 以 专注 于 应 用 开发 。 





9s 虽然 本 书 没有 详细 介绍 Webpack、Babel 等 工具 ， 但 并 不 说 明 它们 不 重要 ， 事实 上 , 它 
生态 。 们 是 现代 Web 开发 工程 化 体系 中 的 重要 内 容 。 建 议 读者 在 掌握 React 后 ， 系 统 地 学 习 
这 些 工 具 。 
1. 安装 
打开 命令 行 终端 ， 依 次 输入 以 下 命令 : 
npm install -9 create-react-app 


通过 使 用 -g 参数 ， 我 们 将 create-react-app 安装 到 了 系统 的 全 局 环境 ， 这 样 就 可 以 在 任意 路 
径 下 使 用 它 了 。 


第 1 章 初 识 React 科 





2. 创建 应 用 

使 用 create-react-app 创建 一 个 新 应 用 ， 在 命令 行 终端 执行 : 

create-react-app my-app 

这 时 会 在 当前 路 径 下 新 建 一 个 名 为 my-app 的 文件 夹 ,my-app 也 就 是 我 们 新 创建 的 React 应 用 。 

3. 运行 应 用 

在 命令 行 终端 执行 : 

cd my-app 

npm start 

当 应 用 启动 成 功 后 ， 在 浏览 器 地 址 栏 输入 http://localhost:3000 即 可 访问 应 用 ， 界 面 如 图 1-1 
所 示 。 


© © localhost 





Welcome to React 





To get started, edit src/App. js and save to reload. 


图 1-1 
用 VS Code 打开 my-app 文件 夹 ， 文 件 夹 内 的 目录 结构 如 图 1-2 所 示 。 





my-app 
| README.md 
广 node_modules 


| package.json 
| .gitignore 

广 public 

LL favicon.ico 
[一 index.html 
[一 manifest.json 
src 

[一 App.css 

二 App.js 

[一 App.test.js 
[一 index.css 





和 


一 index.js 
[一 logo.svg 
[一 registerServiceWorker.js 








图 1-2 


node _ modules 文件 夹 内 是 安装 的 所 有 依赖 模块 ，package.json 文件 定义 了 项 目的 基本 信息 ， 如 
项 目 名 称 、 版 本 号 、 在 该 项 目下 可 执行 的 命令 以 及 项 目的 依赖 模块 等 ; public 文件 夹 下 的 index.html 
是 应 用 的 入 口 页 面 ，src 文件 夹 下 是 项 目 源 代码 ， 其 中 index.js 是 代码 入 
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index.js 导入 了 模块 Appjs， 修 改 Appjs， 将 它 的 render 方法 修改 如 下 : 


render() { 


return ( 


<div className="App"> 


<div className="App-header"> 


<img 


src={logo}l className="App-logo" alt="]logo" /> 


<hl>Welcome to React</h1> 


</div> 


<p className="App-intro"> 


Hello, world! 


</p> 
</div> 
}a 
} 





保存 文件 后 ， 可 以 发 现 浏览 器 页 面 实时 进行 了 更 新 ， 这 是 因为 Create React App 也 包含 热 加 载 











功能 ， 可 实时 更 新 代码 变化 。 新 的 页 面 白色 背景 区 域 显示 “Hello，world!”， 如 图 1-3 所 示 。 


Welcome to React 





Hello，world! 


图 1-3 


至 此 ， 我 们 完成 了 第 一 个 React 应 用 。 


1.4 本章 小 结 


本 章 介 绍 了 React 的 基本 理念 和 主要 特性 ， 让 读者 对 React 先 有 一 个 感性 的 认识 。 同 时 还 介绍 


了 React 开发 中 常 月 
垫 。 从 下 一 章 开始 ， 





目的 ES 6 语法 、React 的 相关 开发 环境 和 工具 ， 这 些 都 是 为 后 面 讲解 React 作 铺 
我 们 将 正式 介绍 React 的 知识 。 





React 基础 


本 章 将 对 React 的 基础 知识 做 详细 介绍 ， 主 要 包括 : 
JSX 语法 

组 件 的 概念 及 使 用 

列表 泻 染 

事件 处 理 

表单 


通过 学 习 本 章 内 容 ,可 以 掌握 React 以 组 件 为 核心 的 基本 开发 方法 。 本 章 还 会 将 每 一 小 节 的 知 
识 点 逐步 应 用 到 一 个 简易 BBS 的 项 目 实例 上 ， 让 大 家 有 更 深 的 理解 和 体会 。 


2.1 JSX 


2.1.1 JSX 简介 


JSX 是 一 种 用 于 描述 UI 的 JavaScript 扩展 语法 ，React 使 用 这 种 语法 描述 组 件 的 UI。 

长 期 以 来 ，UI 和 数据 分 离 一 直 是 前 端 领域 的 一 个 重要 关注 点 。 为 了 解决 这 个 问题 ， 前 端 领域 
发 明了 模板 ,将 UI 的 定义 放 入 模板 文件 ， 将 数据 的 逻辑 维护 在 JS 代码 中 ， 然 后 通过 模板 引擎 ， 根 
据 数据 和 模板 文件 泻 染 出 最 终 的 HTML 文件 或 代码 片段 。 大 部 分 前 端 框架 都 实现 了 自己 的 模板 ， 
要 使 用 这 些 模板 ， 必 须 学 习 它 们 各 自 的 模板 语法 ， 而 且 对 于 复杂 的 UI， 模 板 语法 也 很 难 对 其 进行 
清晰 的 描述 。 
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React 致力 于 通过 组 件 的 概念 将 页 面 进行 拆 分 并 实现 组 件 复 用 。React 认为 ， 一 个 组 件 应 该 是 
具备 UI 描述 和 UI 数据 的 完整 体 ， 不 应 该 将 它们 分 开 处 理 ， 于 是 发 明了 JSX， 作 为 UI 描述 和 UI 
数据 之 间 的 桥梁 。 这 样 ， 在 组 件 内 部 可 以 使 用 类 似 HTML 的 标签 描述 组 件 的 UI， 让 UI 结构 直观 
清晰 ， 同 时 因为 JSX 本 质 上 仍然 是 JavaScript， 所 以 可 以 使 用 更 多 的 JS 语法 ， 构 建 更 加 复杂 的 UI 
结构 。 


2.1.2 ”JSX 语法 
1. 基本 语法 
JSX 的 基本 语法 和 XML 语法 相同 ， 都 是 使 用 成 对 的 标签 构成 一 个 树 状 结构 的 数据 ， 例 如 : 


const element = ( 
<div> 
<hl>Hello, world!</h1> 
</div> 


) 
2. 标签 类 型 


在 JSX 语法 中 , 使 用 的 标签 类 型 有 两 种 : DOM 类 型 的 标签 (div、span 等 ) 和 React 组 件 类 型 
的 标签 (在 2.2 节 详 细 介 绍 组 件 的 概念 ) 。 当 使 用 DOM 类 型 的 标签 时 ， 标 签 的 首 字母 必须 小 写 ; 
当 使 用 React 组 件 类 型 的 标签 时 ， 组 件 名 称 的 首 字 母 必须 大 写 。React 正 是 通过 首 字 母 的 大 小 写 判 
断 泻 染 的 是 一 个 DOM 类 型 的 标签 还 是 一 个 React 组 件 类 型 的 标签 。 例 如 : 


// DoM 类 型 标签 


const element = <hl>Hello, world!</hl>; 


// React 组 件 类 型 标签 


const element = <HelloWorld />; 


// 二 者 可 以 互相 嵌 套 使 用 
const element = ( 
<div> 
<HelloWorld /> 
</div>; 
) 


3. JavaScript 表达 式 
JSX 可 以 使 用 JavaScript 表达 式 , 因为 JSX 本 质 上 仍然 是 JavaScript。 在 JSX 中 使 用 JavaScript 


表达 式 需要 将 表达 式 用 大 括号 “{}” 包 起 来 。 表 达 式 在 JSX 中 的 使 用 场景 主要 有 两 个 :通过 表达 
式 给 标签 属性 赋值 和 通过 表达 式 定义 子 组 件 。 例 如 : 


// 通过 表达 式 给 标签 属性 赋值 


const element = <MyComponent foo={ 1 +2}/> 
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// 通过 表达 式 定义 子 组 件 (map 虽然 是 函数 ， 但 它 的 返回 值 是 Javascript 表达 式 ) 


const todos = ['iteml', 'item2', "item3°']; 
const element = ( 
<ul> 


{todos.map (message => <Item key={message} message={message} />)} 
</ul> 
); 


注意 ，JSX 中 只 能 使 用 JavaScript 表达 式 ， 而 不 能 使 用 多 行 JavaScript 语句 。 例 如 ， 下 面 的 写 
法 都 是 错误 的 : 
// 错误 


const element = <MyComponent foo={const val = 1 + 2; return val; } /> 


// 错误 
let complete; 


const element 


<div> 
{ 
if(complete){ 
return <CompletedList />; 
}elsef{ 


return null; 


} 
</div> 
) 


不 过 ，JSX 中 可 以 使 用 三 目 运 算 符 或 逻辑 与 (&&) 运算 符 代替 站 语句 的 作用 。 例 如 : 
// 正确 


let complete; 
const element = ( 
<div> 
{ 
complete ? <CompletedList /> : null 
} 


</div> 


// 正 确 

let complete; 

const element = ( 
<div> 


{ 
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complete && <CompletedList /> 
} 
</div> 
) 


4. 标签 属性 


当 JSX 标签 是 DOM 类 型 的 标签 时 ， 对 应 DOM 标签 支持 的 属性 JSX 也 支持 ,例如 id、class、 
style、onclick 等 。 但 是 ， 部 分 属性 的 名 称 会 有 所 改变 ， 主 要 的 变化 有 : class 要 写成 className， 
事件 属性 名 采用 驼峰 格式 ， 例 如 onclick 要 写成 onClick。 原 因 是 ，class 是 JavaScript 的 关键 字 ， 
所 以 改 成 className; React 对 DOM 标签 支持 的 事件 重新 做 了 封装 , 封装 时 采用 了 更 常用 的 驼峰 命 
名 法 命名 事件 。 例 如 : 


<div id='content' className='foo' onClick={() => {console.log('Hello, 
React')}} /> 


当 JSX 标签 是 React 组 件 类 型 时 ， 可 以 任意 自 定义 标签 的 属性 名 。 例 如 : 


<User name='React' age='4' address='America' > 


5. 注释 
JSX 中 的 注释 需要 用 大 括号 “{} ”将 /**/ 包 里 起 来 。 例 如 : 
const element = ( 

<div> 


{/* 这 里 是 一 个 注释 */} 
<span>React</span> 
</div> 


2.1.3 ”JSX 不 是 必需 的 
JSX 语法 对 使 用 React 来 说 并 不 是 必需 的 ， 实 际 上 ，JSX 语法 只 是 React.createElement 


(compbonent，props，.…childrem) 的 语法 糖 ， 所 有 的 JSX 语法 最 终 都 会 被 转换 成 对 这 个 方法 的 调用 。 
例如 : 


//ISX 语法 

const element = <div className='foo'>Hello, React</div> 

// 转 换 后 

const element = React.createElement ('div', {className: 'foo'}, 'Hello, 
React') 


虽然 JSX 只 是 一 个 语法 糖 , 但 使 用 它 创建 界面 元 素 更 加 清晰 简洁 , 在 项 目 使 用 中 应 该 首选 JSX 
语法 。 
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22 组 件 


2.2.1 组 件 定义 


组 件 是 React 的 核心 概念 ， 是 React 应 用 程序 的 基石 。 组 件 将 应 用 的 UI 拆 分 成 独立 的 、 可 复 
用 的 模块 ，React 应 用 程序 正 是 由 一 个 一 个 组 件 搭建 而 成 的 。 

定义 一 个 组 件 有 两 种 方式 ， 使 用 ES 6 class( 类 组 件 ) 和 使 用 函数 〈 函 数组 件 ) 。 我 们 先 介绍 
使 用 class 定义 组 件 的 方式 ， 使 用 函数 定义 组 件 的 方式 稍 后 介绍 。 

使 用 class 定义 组 件 需要 满足 两 个 条 件 : 


(1) class 继承 自 ReactComponent。 
(2) class 内 部 必须 定义 render 方法 ，render 方法 返回 代表 该 组 件 UI 的 React 元 素 。 


使 用 create-react-app 新 建 一 个 简易 BBS 项 目 , 在 这 个 项 目 中 定义 一 个 组 件 PostList, 用 于 展示 
BBS 的 帖子 列表 。 
PostList 的 定义 如 下 : 


// PostList.js 


import React, { Component } from "react"; 


class PostList extends Component { 
render() { 
return ( 
<div> 
帖子 列表 : 
<ul> 
<1i> 大 家 一 起 来 讨论 React 吧 </1i> 
<1i> 前 端 框 架 ， 你 最 爱 哪 一 个 </1i> 
<1i>Web App 的 时 代 已 经 到 来 </1i> 
</ul> 
</div> 
); 
} 
} 


export default PostList; 
注意 ， 在 定义 组 件 之 后 ， 使 用 ES 6 export 将 PostList 作为 默认 模块 导出 ， 从 而 可 以 在 其 他 JS 


文件 中 导入 PostList 使 用 。 现 在 页 面 上 还 无 法 显示 出 PostList 组 件 ， 因 为 我 们 还 没有 将 PostList 挂 
载 到 页 面 的 DOM 节点 上 。 需 要 使 用 ReactDOM .render() 完成 这 一 个 工作 : 


// index.js 


import React from "react"; 
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import ReactDOM from "react-dom"; 


import PostList from "./PostList"; 


ReactDOM.render (<PostList />, document.getElementById("root")); 





注意 ， 使 用 ReactDOM.render() 需要 先导 入 react-dom 库 ， 话题 列表 : 
这 个 库 会 完成 组 件 所 代表 的 虚拟 DOM 节点 到 浏览 器 的 DOM 


节点 的 转换 。 此 时 ， 页 面 展现 在 浏览 器 中 ， 如 图 2-1 所 示 。 ee 
为 我 们 并 没有 为 组 件 添加 任何 CSS 样式 , 所 以 当前 的 页 面 效果 |。 Web Ape 的 时 代 已 经 到 来 


还 非常 简陋 ， 后 续 会 逐步 进行 优化 。 本 节 项 目 源 代码 的 目录 为 
/chapter-02/bbs-components。 


2.2.2 组件 的 props 





在 2.2.1 小 节 中 ，PostList 中 的 每 一 个 帖子 都 使 用 一 个 标签 直接 包 庄 ， 但 一 个 帖子 不 仅 包含 帖 
子 的 标题 ， 还 会 包含 帖子 的 创建 人 、 帖 子 创建 时 间 等 信息 ， 这 时 候 标签 下 的 结构 就 会 变 得 复杂 ， 而 


且 每 一 个 帖子 都 需要 重 写 一 次 这 个 复杂 的 结构 ，PostList 的 结构 将 会 变 成 类 似 这 样 的 形式 : 


class PostList extends Component 1{ 
render() { 
return ( 
<div> 
帖子 列表 : 
<ul> 
<1i> 
<div> 大 家 一 起 来 讨论 React 吧 </div> 
<div> 创 建 人 : <span> 张 三 </span></div> 
<div> 创 建 时 间 : <span>2017-09-01 10: 00</span></div> 
</1i> 
<1i> 
<div> 前 端 框 架 ， 你 最 爱 哪 一 个 </div> 
<div> 创 建 人 : <span> 李 四 </span></div> 
<div> 创 建 时 间 : <span>2017-09-01 12: 00</span></div> 
</1i> 
<l1i> 
<div>Web App 的 时 代 已 经 到 来 </div> 
<div> 创 建 人 : <span> 王 五 </span></div> 
<div> 创 建 时 间 : <span>2017-09-01 14: 00</span></div> 
</1i> 
</ul> 


</div> 


第 2 章 React 基础 19 





这 样 的 结构 显然 很 元 余 ， 我 们 完全 可 以 封装 一 个 PostItem 组 件 负责 每 一 个 帖子 的 展示 ， 然 后 在 
PostList 中 直接 使 用 PostItem 组 件 ， 这 样 在 PostList 中 就 不 需要 为 每 一 个 帖子 重复 写 一 堆 JSX 标签 。 
但 是 , 帖子 列表 的 数据 依然 存在 于 PostList 中 , 如 何 将 数据 传递 给 每 一 个 PostItem 组 件 呢 ? 这 时 候 就 
需要 用 到 组 件 的 props 属性 。 组 件 的 props 用 于 把 父 组 件 中 的 数据 或 方法 传递 给 子 组 件 ， 供 子 组 件 使 
用 。 在 2.1 节 中 ， 我 们 介绍 了 JSX 标签 的 属性 。props 是 一 个 简单 结构 的 对 象 ， 它 包含 的 属性 正 是 由 
组 件 作为 JSX 标签 使 用 时 的 属性 组 成 。 例 如 下 面 是 一 个 使 用 User 组 件 作为 JSX 标签 的 声明 : 


<User name='React' age='4' address='Rmerica' > 
此 时 User 组 件 的 props 结构 如 下 : 


props = { 
name: 'React', 





age: '4', 
address: 'America' 


} 
现在 我 们 利用 props 定义 PostItem 组 件 : 


// PostItem.js 


import React, { Component } from "react"; 


Class PostItem extends Component { 
render() { 
const { title, author, date } = this.props; 
return ( 
Ly 
<div> 
{title} 
</div> 
<div> 
创建 人 : <span>{author}</span> 
</div> 
<div> 
创建 时 间 : <span>{date}</span> 
</div> 
</1i> 
); 
’ 
} 


export default PostItem; 


然后 在 PostList 中 使 用 PostItem: 





// PostList.ijs 
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import React, { Component } from "react"; 


import PostItem from "./PostItem"; 


// 真实 项 目 中 ， 帖 子 列表 数据 一 般 从 服务 器 端 获 取 

// 这 里 我 们 通过 定义 常量 data 存储 列表 数据 

const data = [ 
{ title: "大 家 一 起 来 讨论 React 吧 "，author: " 张 三 "，date: "2017-09-01 10:00" }， 
{ title: "前 端 框架 ， 你 最 爱 哪 一 个 "，author: " 李 四 "，date: "2017-09-01 12:00" ]}， 
{ title: "Web App 的 时 代 已 经 到 来 "，author: " 王 五 "，date: "2017-09-01 14:00" } 

]; 

class PostList extends Component { 





render() { 
return ( 
<div> 
帖子 列表 : 
<ul> 
{data.map (item => 
<PostItem 
title={item.title} 
author={item.author} 
date={item.date} 
学 or 
) } 
</ul> 
</div> 
) 7 


export default PostList; 


此 时 ， 页 面 截图 如 图 2-2 所 示 。 本 节 项 目 源 代码 的 目录 为 /chapter-02/bbs-components-props。 
话题 列表 : 


。 大 家 一 起 来 讨论 React 吧 
创建 人 : 张 三 
创建 时 间 : 2017-09-01 10:00 
。 前 端 框架 ， 你 最 爱 哪 一 个 


创建 人 : 李 四 

创建 时 间 : 2017-09-0112:00 
。 Web App 的 时 代 已 经 到 来 

创建 人 : 王 五 

创建 时 间 : 2017-09-0114:00 








图 2-2 
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2.2.3 组 件 的 state 


组 件 的 state 是 组 件 内 部 的 状态 ，state 的 变化 最 终 将 反映 到 组 件 UI 的 变化 上 。 我 们 在 组 件 的 
构造 方法 constructor 中 通过 this.state 定义 组 件 的 初始 状态 ， 并 通过 调用 this.setState 方法 改变 组 件 
状态 〈 也 是 改变 组 件 状态 的 唯一 方式 ) ， 进 而 组 件 UI 也 会 随 之 重新 泻 染 。 

下 面 来 改造 一 下 BBS 项 目 。 我 们 为 每 一 个 帖子 增加 一 个 “点 赞 ” 按 钮 ， 每 点 击 一 次 ， 该 帖子 
的 点 赞 数 增加 1。 点 赞 数 是 会 发 生变 化 的 ， 它 的 变化 也 会 影响 到 组 件 UI， 因 此 我 们 将 点 赞 数 vote 
作为 PostItem 的 一 个 状态 定义 到 它 的 state 内 。 


import React, { Component } from "react"; 


class PostItem extends Component { 
constructor(props) { 
super (props); 
this.state = { 
vote: 0 
}; 


} 
// 处 理 点 赞 逻 辑 
handleClick() { 
let vote = this.state.vote; 
Votet+} 
this.setState({ 
vote: vote 
]) 
} 


render() { 
const { title, author, date } = this.props; 
return ( 
<1i> 
<div> 
{title} 
</div> 
<div> 
创建 人 : <span>{author}</span> 
</div> 
<div> 
创建 时 间 : <span>{date}</span> 
</div> 
<div> 
<button 
onClick={() => { 
this.handleClick(); 
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点 赞 
</button> 
&nbsp; 
<span> 

{this.state.vote} 
</span> 

</div> 
</1i> 
); 
} 
} 


export default PostItem; 
这 里 有 三 个 需要 注意 的 地 方 : 


(1) 在 组 件 的 构造 方法 constructor 内 ， 首 先 要 调用 super(props)， 这 一 步 实 际 上 是 调用 了 
React.Component 这 个 class 的 constructor 方法 ， 用 来 完成 React 组 件 的 初始 化 工作 。 

(2) 在 constructor 中 ， 通 过 this.state 定义 了 组 件 的 状态 。 

(3) 在 render 方法 中 ， 我 们 为 标签 定义 了 处 理 点 击 事件 的 响应 函数 ， 在 响应 函数 内 部 会 调用 
this.setState 更 新 组 件 的 点 赞 数 。 


新 页 面 的 截图 如 图 2-3 所 示 。 本 节 项 目 源 代码 的 目录 为 /chapter-02/bbs-components-state。 
通过 2.2.2 和 2.2.3 两 个 小 节 的 介绍 可 以 发 现 ， 组 件 的 props 和 state 都 会 直接 影响 组 件 的 UI。 
事实 上 ，React 组 件 可 以 看 作 一 个 函数 ， 函 数 的 输入 是 props 和 state， 函 数 的 输出 是 组 件 的 UI。 


UI = Component (props, state) 
话题 列表 : 


。 大 家 一 起 来 讨论 React 吧 
创建 人 : 张 三 
创建 时 间 : 2017-09-01 10:00 

点 赞 1 

。 前 端 框 架 ， 你 最 爱 哪 一 个 
创建 人 : 李 四 


创建 时 间 : 2017-09-01 12:00 
点 赞 | 2 

eb App 的 时 代 已 经 到 来 
创建 人 : 王 五 

创建 时 间 : 2017-09-01 14:00 
点 赞 0 
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React 组 件 正 是 由 props 和 state 两 种 类 型 的 数据 驱动 泻 染 出 组 件 UI。props 是 组 件 对 外 的 接口 ， 
组 件 通 过 props 接收 外 部 传 入 的 数据 (包括 方法 ) ; state 是 组 件 对 内 的 接口 ， 组 件 内 部 状态 的 变化 
通过 state 来 反映 。 另 外 ，props 是 只 读 的 ， 你 不 能 在 组 件 内 部 修改 props; state 是 可 变 的 ， 组 件 状 
态 的 变化 通过 修改 state 来 实现 。 在 第 4 章 中 ， 我 们 还 会 对 props 和 state 进行 详细 比较 。 


2.2.4 ”有 状态 组 件 和 无 状态 组 件 


是 不 是 每 个 组 件 内 部 都 需要 定义 state 呢 ? 当然 不 是 。state 用 来 反映 组 件 内 部 状态 的 变化 ， 如 
果 一 个 组 件 的 内 部 状态 是 不 变 的 , 当然 就 用 不 到 state, 这 样 的 组 件 称 之 为 无 状态 组 件 , 例如 PostList。 
反之 ， 一 个 组 件 的 内 部 状态 会 发 生变 化 ， 就 需要 使 用 state 来 保存 变化 ， 这 样 的 组 件 称 之 为 有 状态 
组 件 ， 例 如 PostItem。 

定义 无 状态 组 件 除了 使 用 ES 6 class 的 方式 外 ， 还 可 以 使 用 函数 定义 ， 也 就 是 我 们 在 本 节 开 始 
时 所 说 的 函数 组 件 。 一 个 函数 组 件 接收 props 作为 参数 ， 返 回 代 表 这 个 组 件 UI 的 React 元 素 结构 。 
例如 ， 下 面 是 一 个 简单 的 函数 组 件 : 


function Welcome (props) { 
return <hl>Hello, {props.name}</hl>; 
} 


可 以 看 出 ， 函 数组 件 的 写法 比 类 组 件 的 写法 要 简洁 很 多 ， 在 使 用 无 状态 组 件 时 ， 应 该 尽量 将 
其 定义 成 函数 组 件 。 

在 开发 React 应 用 时 , 一 定 要 先 认真 思考 哪些 组 件 应 该 设计 成 有 状态 组 件 , 哪些 组 件 应 该 设计 
成 无 状态 组 件 。 并 且 ， 应 该 尽 可 能 多 地 使 用 无 状态 组 件 ， 无 状态 组 件 不 用 关心 状态 的 变化 ， 只 聚焦 
于 UI 的 展示 ， 因 而 更 容易 被 复 用 。React 应 用 组 件 设计 的 一 般 思路 是 ， 通 过 定义 少数 的 有 状态 组 
件 管理 整个 应 用 的 状态 变化 ， 并 且 将 状态 通过 props 传递 给 其 余 的 无 状态 组 件 ， 由 无 状态 组 件 完成 
页 面 绝 大 部 分 UI 的 演 染 工作 。 总 之 ， 有 状态 组 件 主要 关注 处 理 状态 变化 的 业务 逻辑 ， 无 状态 组 件 
主要 关注 组 件 UI 的 泻 染 。 

下 面 让 我 们 回 过 头 来 看 一 下 BBS 项 目的 组 件 设 计 。 当 前 的 组 件 设计 并 不 合适 ， 主 要 体现 在 : 


(1) 帖子 列表 通过 一 个 常量 data 保存 在 组 件 之 外 ， 但 帖子 列表 的 数据 是 会 改变 的 ， 新 帖子 的 
增加 或 原 有 帖子 的 删除 都 会 导致 帖子 列表 数据 的 变化 。 

(2) 每 一 个 PostItem 都 维持 一 个 vote 状态 ， 但 除了 vote 以 外 ， 帖 子 其 他 的 信息 (如 标题 、 
创建 人 等 ) 都 保存 在 PostList 中 ， 这 显然 也 是 不 合理 的 。 


我 们 对 这 两 个 组 件 进行 重新 设计 , 将 PostList 设计 为 有 状态 组 件 ， 负 责 帖子 列表 数据 的 获取 以 
及 点 赞 行为 的 处 理 ， 将 PostItem 设计 为 无 状态 组 件 ， 只 负责 每 一 个 帖子 的 展示 。 此 时 ，PostList 和 
PostItem 重 构 如 下 : 


// PostList.js 





import React, { Component } from "react"; 


import PostItem from "./PostItem"; 


class PostList extends Component { 


constructor (props) { 
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super (props); 
this.state = { 
posts: [] 
Fs 
this.timer = null;  // 定时 器 
this.handleVote = this.handleVote.bind(this); //ES 6 class 中 ， 必 须 手 动 绑 
定 方法 this 的 指向 


componentDidMount () { 
// 用 setTimeout 模拟 异步 从 服务 器 端 获 取 数 据 
this.timer = setTimeout(() => { 
this.setState({ 
posts: [ 
{ id: 1，title: "大 家 一 起 来 讨论 React 吧 "， author: " 张 三 "，date: 
“2017=-09=-01 10200 vote: 0 ls 
{ id: 2，title: "前 端 框 架 , 你 最 爱 哪 一 个 ", author: " 李 四 ", date: "2017-09-01 
12:00", vote: 0 }, 
{ id: 3，title: "Web App 的 时 代 已 经 到 来 "，author: " 王 五 "，date: 
"2017-09-01 14:00", vote: 0 } 
] 
Ms 
}, 1000); 


componentWillUnmount() { 
if(this.timer) { 
clearTimeout (this.timer); // 清除 定时 器 


handleVote (id) { 
// 根 据 帖 子 id 进行 过 滤 ， 找 到 待 修改 vote 属性 的 帖子 ， 返 回 新 的 posts 对 象 


Const posts = this.state.posts.map(item => { 





const newItem = item.id =: id ? {...item, vote: ++item.vote} : item; 
return newltem; 

Ds; 

// 使 用 新 的 posts 对 象 设置 state 

this.setState({ 
posts 


Ds; 
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render() { 
return ( 
<div> 
帖子 列表 : 
<ul> 
{this.state.posts.map (item => 
<PostItem 
post = {item} 
onVote = {this.handleVote} 
/> 


export default PostList; 


// PostItem.js 


import React from "react"; 


function PostItem(props) { 
const handleClick = () => { 
props.onVote (props.post.id); 
}; 
const { post } = props; 
return ( 
<1li> 
<div> 
{post.title} 
</div> 
<div> 
创建 人 : <span>{post.author}</span> 
</div> 
<div> 
创建 时 间 : <span>{post.date}</span> 
</div> 
<div> 
<button onClick={handleClick}> 点 赞 </button> 
&nbsp; 
<span>{post.vote}</span> 


</div> 
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</1i> 


export default PostItem; 
这 里 主要 的 修改 有 : 


(1) 帖子 列表 数据 定义 为 PostList 组 件 的 一 个 状态 。 

(2) 在 componentDidMount 生命 周期 方法 中 《关于 组 件 的 生命 周期 将 在 2.3 节 详 细 介绍 ) 通 
过 setTimeout 设置 一 个 延 时 ， 模 拟 从 服务 器 端 获取 数据 ， 然 后 调用 setState 更 新 组 件 状态 。 

(3) 将 帖子 的 多 个 属性 ID、 标题 、 创 建 人 、 创 建 时 间 、 点 赞 数 ) 合并 成 一 个 post 对 象 ， 通 
过 props 传递 给 PostItem。 

(4) 在 PostList 内 定义 handleVote 方 法 , 处理 点 赞 逻 辑 , 并 将 该 方法 通过 props 传递 给 PostItem。 

(5) PostItem 定义 为 一 个 函数 组 件 ， 根 据 PostList 传递 的 post 属性 泻 染 UI。 当 发 生 点 赞 行为 
时 ， 调 用 props.onVote 方法 将 点 赞 逻 辑 交 给 PostList 中 的 handleVote 方法 处 理 。 


这 样 修改 后 , PostItem 只 关注 如 何 展示 帖子 , 至 于 帖子 的 数据 从 何 而 来 以 及 点 赞 逻辑 如 何 处 理 ， 
统统 交 给 有 状态 组 件 PostList 处 理 。 组 件 之 间 解 耦 更 加 彻底 ，Post[tem 组 件 更 容易 被 复 用 。 本 节 项 
目 源 代码 的 目录 为 /chapter-02/bbs-components-stateless。 


2.2.5 ”属性 校 验 和 默认 属性 


我 们 已 经 知道 ，props 是 一 个 组 件 对 外 暴露 的 接口 ， 但 到 目前 为 止 ， 组 件 内 部 并 没有 明显 地 声 
明 它 暴露 出 哪些 接口 ， 以 及 这 些 接口 的 类 型 是 什么 ， 这 不 利于 组 件 的 复 用 。 幸 运 的 是 ，React 提供 
了 PropTypes 这 个 对 象 ， 用 于 校 验 组 件 属性 的 类 型 。PropTypes 包含 组 件 属性 所 有 可 能 的 类 型 ， 我 
们 通过 定义 一 个 对 象 〈 对 象 的 key 是 组 件 的 属性 名 ，value 是 对 应 属性 的 类 型 ) 实现 组 件 属性 类 型 
的 校 验 。 例 如 : 


import PropTypes from 'Prop-types' 7 





class PostItem extends React.Component 1{ 


PostItem.PropTYpes = { 
post: PropTypes.object, 
onVote: PropTypes.func 

] 7 


PropTypes 可 以 校 验 的 组 件 属性 类 型 见 表 2-1。 
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表 2-1 组 件 属性 类 型 和 PropTypes 属 性 的 对 应 关系 



































类 型 PropTypes 对 应 属性 
String PropTypes.string 
Number PropTypes.number 
Boolean PropTypes.bool 
Function PropTypes.func 
Object PropTypes.object 
Array PropTypes.array 
Symbol PropTypes.symbol 
Element (React 元 素 ) PropTypes.element 
Node (可 被 泻 染 的 节点 : 数字 、 字符 串 、React 元 素 或 由 这 些 类 型 的 数据 组 成 的 数组 ) | PropTypes.node 


当 使 用 PropTypes.object 或 PropTypes.array 校 验 属性 类 型 时 , 我 们 只 知道 这 个 属性 是 一 个 对 象 
或 一 个 数组 ， 至 于 对 象 的 结构 或 数组 元 素 的 类 型 是 什么 样 的 ， 依 然 无 从 得 知 。 这 种 情况 下 ,更 好 的 
做 法 是 使 用 PropTypes.shape 或 PropTypes.arrayOf。 例 如 : 





style: PropTypes.shape({ 
color: PropTypes.string, 
fontSize: PropTypes.number 
})， 
sequence: PropTypes.arrayOf (PropTypes.number) 


表示 style 是 一 个 对 象 ， 对 象 有 color 和 fontSize 两 个 属性 ，color 是 字符 串 类 型 ，fontSize 是 数 
字 类 型 ，sequence 是 一 个 数组 ， 数 组 的 元 素 是 数字 。 

如 果 属 性 是 组 件 的 必需 属性 , 也 就 是 当 使 用 某 个 组 件 时 , 必须 传 入 的 属性 , 就 需要 在 PropTypes 
的 类 型 属性 上 调用 isRequired。 在 BBS 项 目 中 ,对 于 PostItem 组 件 ，post 和 onVote 都 是 必需 属性 ， 
PostItem 的 propTypes 定义 如 下 : 


PostIitem.propTypes = { 
post: PropTypes.shape({ 
id: PropTypes.number, 
title: PropTypes.string, 
author: PropTypes.string, 
date: PropTypes.string, 
vote: PropTypes.number 
}) .isRequired, 
onVote: PropTypes.func.isRequired 
} 


本 节 项 目 源 代码 的 目录 为 /chapter-02/bbs-components-propTypes。 
React 还 提供 了 为 组 件 属性 指定 默认 值 的 特性 ， 这 个 特性 通过 组 件 的 defaultProps 实现 。 当 组 
件 属性 未 被 赋值 时 ， 组 件 会 使 用 defaultProps 定义 的 默认 属性 。 例 如 : 
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function Welcome (Props) { 
return <hl className='foo'>Hello, {props.name}</h1l>; 


} 


Welcome.defaultProps = { 
name: 'Stranger' 


}; 
2.2.6 组 件 样式 


到 目前 为 止 ， 我 们 还 未 对 组 件 添加 任何 样式 。 本 节 将 介绍 如 何 为 组 件 添加 样式 。 
为 组 件 添加 样式 的 方法 主要 有 两 种 ， 外 部 CSS 样式 表 和 内 联 样 式 。 


1. 外 部 CSS 样式 表 


这 种 方式 和 我 们 平时 开发 Web 应 用 时 使 用 外 部 CSS 文件 相同 ，CSS 样式 表 中 根据 HTML 标 
签 类 型 、ID、class 等 选择 器 定义 元 素 的 样式 。 唯 一 的 区 别 是 ，React 元 素 要 使 用 className 来 代替 
class 作为 选择 器 。 例 如 ， 为 Welcome 组 件 的 根 节点 设置 一 个 className='foo' 的 属性 : 


function Welcome (Props) { 
return <hl className='foo'>Hello, {props.name}</h1>; 


} 
然后 在 CSS 样式 表 中 通过 class 选择 器 定义 Welcome 组 件 的 样式 : 


// style.css 

.foo { 
width:100%; 
height:50px; 
background-color:blue; 
font-size: 20px; 


} 

样式 表 的 引入 方式 有 两 种 ， 一 种 是 在 使 用 组 件 的 HTML 页 面 中 通过 标签 引入 : 

<link rel="stylesheet" type="text/css" href="style.css"> 

另 一 种 是 把 样式 表 文 件 当 作 一 个 模块 ， 在 使 用 该 样式 表 的 组 件 中 ， 像 导入 其 他 组 件 一 样 导 入 
样式 表 文件 : 

import './style.css'; // 要 保证 相对 路 径 设置 正确 


function Welcome (Props) 1{ 
return <hl className='foo'>Hello，{props.-name}j</hl>; 


} 


第 一 种 引入 样式 表 的 方式 常用 于 该 样式 表 文件 作用 于 整个 应 用 的 所 有 组 件 一般 是 基础 样式 
表 ) ; 第 二 种 引入 样式 表 的 方式 常用 于 该 样式 表 作 用 于 某 个 组 件 (相当 于 组 件 的 私有 样式 ) ， 全 局 
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的 基础 样式 表 也 可 以 使 用 第 二 种 方式 引入 ， 一 般 在 应 用 的 入 口 JS 文件 中 引入 。 


补充 说 明 : 使 用 CSS 样式 表 经 常 遇 到 的 一 个 问题 是 class 名 称 冲突 。 业 内 解决 这 个 问题 的 一 个 
常用 方案 是 使 用 CSS Modules，CSS Modules 会 对 样式 文件 中 的 class 名 称 进行 重 命名 从 而 保证 其 
唯一 性 , 但 CSS Modules 并 不 是 必需 的 ，create-react-app 创建 的 项 目 ， 默 认 配 置 也 是 不 支持 这 一 特 
性 的 。CSS Modules 的 使 用 并 不 复杂 ， 感 兴趣 的 读者 可 自行 了 解 〈 参 考 地 址 : https://github.com/ 


css-modules/css-modules) 。 


2. 内 联 样式 


内 联 样 式 实际 上 是 一 种 CSS in JS 的 写法 : 将 CSS 样式 写 到 JS 文件 中 ， 用 JS 对 象 表示 CSS 
样式 ， 然 后 通过 DOM 类 型 节点 的 style 属性 引用 相应 样式 对 象 。 依 然 使 用 Welcome 组 件 举例 : 


function Welcome (props) { 
return ( 
<hl 
style={{ 
width: "100%", 
height: "50px", 
backgroundColor: "blue", 
fontSize: "20px" 
}} 
¥ 
Hello, {props.name} 
</h1> 
); 
} 


style 使 用 了 两 个 大 括号 ， 这 可 能 会 让 你 感到 迷惑 。 其 实 ， 第 一 个 大 括号 表示 style 的 值 是 一 个 
JavaScript 表达 式 ， 第 二 个 大 括号 表示 这 个 JavaScript 表达 式 是 一 个 对 象 。 换 一 种 写法 就 容易 理解 了 : 


function Welcome (props) { 
const style = { 
width: "100%", 
height: "50px", 
backgroundColor: "blue", 
fontSize: "20px" 
}; 
return <hl style={style}>Hello, {props.name}</hi>; 
} 
当 使 用 内 联 样式 时 ， 还 有 一 点 需要 格外 注意 : 样式 的 属性 名 必须 使 用 驼峰 格式 的 命名 。 所 以 ， 
在 Welcome 组 件 中 ，background-color 写成 backgroundColor，font-size 写成 fontSize。 
下 面 为 BBS 项 目 增加 一 些 样式 。 创 建 style.css、PostList.css 和 PostItem.css 三 个 样式 文件 ， 三 
个 样式 表 分 别 在 index.html、PostListjs、PostItem.js 中 引入 。 样 式 文件 如 下 : 
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// style.css 
body { 

07 
07 


margin: 
padding: 


font-family: sans-serif; 


ul { 


list-style: none; 


h2 { 


text-align: center; 


// PostList.css 
.container { 
width: 900px; 


margin: 20px auto; 


// PostItem.css 
.item { 
border-top: lpx solid grey; 
padding: 15px; 
font-size: 14px; 
color: grey; 


line-height: 21lpx; 


.title { 
font-size: 16px; 
font-weight: bold; 
line-height: 24px; 


color: #009a617 


“ee 
width: 100%; 


height: 20px; 
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-like img{ 
width: 20px; 
height: 20px; 


.like spant{ 
width: 20px; 
height: 20px; 
vertical-align: middle; 
display: table-cell; 

} 


这 里 需要 提醒 一 下 ，style.css 放置 在 public 文件 夹 下 ，PostList.css 和 PostItem.css 放置 在 src 
文件 夹 下 。create-react-app 将 public 下 的 文件 配置 成 可 以 在 HTML 页 面 中 直接 引用 ， 因 此 我 们 将 
style.css 放置 在 public 文件 夹 下 。 而 PostList.css 和 PostItem.css 是 以 模块 的 方式 在 JS 文件 中 被 导入 
的 ， 因 此 放置 在 src 文件 夹 下 。 

我 们 还 将 PostItem 中 的 点 赞 按钮 换 成 了 图 标 ， 图 标 也 可 以 作为 一 个 模块 被 JS 文件 导入 ， 如 
PostItem.js 所 示 : 


import React from "react"; 
import "./PostItem.css"; 
import like from "./images/1like-default.png";  ”// 图 标 作为 模块 被 导入 


function PostIitem(props) { 
const handleClick = () => { 
props.onVote (props.post.id); 
}; 
const { post } = props; 
return ( 
<1i className='item'> 
<div className='title'> 
{post.title} 
</div> 
<div> 
创建 人 : <span>{post.author}</span> 
</div> 
<div> 
创建 时 间 : <span>{post .date}</span> 
</div> 
<div className='like'> 
<span><img src={like} onClick={handleClick} /></span> 
<span>{post.vote}</span> 


</div> 
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export default PostItem; 
增加 样式 后 的 页 面 截图 如 图 2-4 所 示 。 本 节 项 目 源 代码 的 目录 为 /chapter-02/bbs-components-style。 
话题 列表 





大 家 一 起 来 讨论 React 吧 

创建 人 : 张 三 

创建 时 间 : 2017-09-01 10:00 
0 


前 端 框架 ， 你 最 爱 哪 一 个 

创建 人 : 李 四 

创建 时 间 : 2017-09-01 12:00 
0 


Web App 的 时 代 已 经 到 来 

创建 人 : 王 五 

创建 时 间 : 2017-09-01 14:00 
0 








2-4 
2.2.7 ”组 件 和 元 素 


在 2.1 节 介绍 过 React 元 素 的 概念 。React 组 件 和 元 素 这 两 个 概念 非常 容易 混淆 。React 元 素 是 
一 个 普通 的 JavaScript 对 象 ， 这 个 对 象 通过 DOM 节点 或 React 组 件 描述 界面 是 什么 样子 的 。JSX 
语法 就 是 用 来 创建 React 元 素 的 〈 不 要 忘 了 ，JSX 语法 实际 上 是 调用 了 React.createElement 方法 ) 。 
例如 : 


//Button 是 一 个 自 定义 的 React 组 件 
<div className='foo'> 
<Button color='blue'> 
OK 
</Button> 


</div> 
上 面 的 JSX 代码 会 创建 下 面 的 React 元 素 : 


{ 
type: 'div', 
props: { 
className: 'foo', 
children: { 
type: 'Button', 
props: { 
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Colors: "blue'y 


children: 'OK' 


} 


React 组 件 是 一 个 class 或 函数 ， 它 接收 一 些 属性 作为 输入 ， 返 回 一 个 React 元 素 。React 组 件 
是 由 若干 React 元 素 组 建 而 成 的 。 通 过 下 面 的 例子 ， 可 以 解释 React 组 件 与 React 元 素 间 的 关系 。 


// Button 是 一 个 React 组 件 
class Button extends React.Component { 
render() { 
return (<button>OK</button>); 


// 在 Jsx 中 使 用 组 件 Button， button 是 一 个 代表 组 件 Button 的 React 元 素 


const button = <Button />; 


// 在 组 件 Page 中 使 用 React 元 素 button 
class Page extends React .Component { 
render() { 
return ( 
<div> 
{button} 
</div> 
); 


// 上 面 的 Page 写法 等 价 于 下 面 这 种 写法 : 
class Page extends React.Component { 
render() { 
return ( 
<div> 
<Button /> 
</div> 
六 
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2.3 组 件 的 生命 周期 


组 件 从 被 创建 到 被 销毁 的 过 程 称 为 组 件 的 生命 周期 。React 为 组 件 在 不 同 的 生命 周期 阶段 提供 
不 同 的 生命 周期 方法 ， 让 开发 者 可 以 在 组 件 的 生命 周期 过 程 中 更 好 地 控制 组 件 的 行为 。 通 常 ， 组件 
的 生命 周期 可 以 被 分 为 三 个 阶段 : 挂 载 阶 段 、 更 新 阶段 、 印 载 阶段 。 


2.3.1 挂 载 阶段 


这 个 阶段 组 件 被 创建 ， 执 行 初始 化 ， 并 被 挂 载 到 DOM 中 ， 完 成 组 件 的 第 一 次 演 染 。 依 次 调用 
的 生命 周期 方法 有 : 


(1) constructor 

(2) componentWillMount 
(3) render 

(4) componentDidMount 


1. constructor 


这 是 ES 6 class 的 构造 方法 ， 组 件 被 创建 时 ， 会 首先 调用 组 件 的 构造 方法 。 这 个 构造 方法 接收 
一 个 props 参数 ，props 是 从 父 组 件 中 传 入 的 属性 对 象 ， 如 果 父 组 件 中 没有 传 入 属性 而 组 件 自身 定 
义 了 默认 属性 ， 那 么 这 个 props 指向 的 就 是 组 件 的 默认 属性 。 你 必须 在 这 个 方法 中 首先 调用 
super(props) 才 能 保证 props 被 传 入 组 件 中 。 constructor 通常 用 于 初始 化 组 件 的 state 以 及 绑 定 事件 处 
理 方法 等 工作 。 


2. componentWillMount 


这 个 方法 在 组 件 被 挂 载 到 DOM 前 调用 , 且 只 会 被 调用 一 次 。 这 个 方法 在 实际 项 目 中 很 少 会 用 
到 ， 因 为 可 以 在 该 方法 中 执行 的 工作 都 可 以 提前 到 constructor 中 。 在 这 个 方法 中 调用 this.setState 
不 会 引起 组 件 的 重新 演 染 。 


3. render 


这 是 定义 组 件 时 唯一 必要 的 方法 〈 组 件 的 其 他 生命 周期 方法 都 可 以 省 略 ) 。 在 这 个 方法 中 ， 
根据 组 件 的 props 和 state 返回 一 个 React 元 素 ， 用 于 描述 组 件 的 UI， 通 常 React 元 素 使 用 JSX 语 
法 定义 。 需 要 注意 的 是 ，render 并 不 负责 组 件 的 实际 泻 染 工作 ， 它 只 是 返回 一 个 UI 的 描述 ， 真 正 
的 渲染 出 页 面 DOM 的 工作 由 React 自身 负责 。render 是 一 个 纯 函数 ， 在 这 个 方法 中 不 能 执行 任何 
有 副作用 的 操作 ， 所 以 不 能 在 render 中 调用 this.setState， 这 会 改变 组 件 的 状态 。 


4. componentDidMount 


在 组 件 被 挂 载 到 DOM 后 调用 ， 且 只 会 被 调用 一 次 。 这 时 候 已 经 可 以 获取 到 DOM 结构 ， 因 此 
依赖 DOM 节点 的 操作 可 以 放 到 这 个 方法 中 。 这 个 方法 通常 还 会 用 于 向 服务 器 端 请 求 数据 。 在 这 个 
方法 中 调用 this.setState 会 引起 组 件 的 重新 泻 染 。 
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2.3.2 更 新 阶段 


组 件 被 挂 载 到 DOM 后 ， 组 件 的 props 或 state 可 以 引起 组 件 更 新 。props 引起 的 组 件 更 新 ， 本 
质 上 是 由 演 染 该 组 件 的 父 组 件 引起 的 ， 也 就 是 当 父 组 件 的 render 方法 被 调用 时 ， 组 件 会 发 生 更 新 
过 程 ， 这 个 时 候 ， 组 件 props 的 值 可 能 发 生 改变 ， 也 可 能 没有 改变 ， 因 为 父 组 件 可 以 使 用 相同 的 对 
象 或 值 为 组 件 的 props 赋值 。 但 是 ， 无 论 props 是 否 改变 ， 父 组 件 render 方法 每 一 次 调用 ， 都 会 导 
致 组 件 更 新 。State 引起 的 组 件 更 新 ， 是 通过 调用 this.setState 修改 组 件 state 来 触发 的 。 组 件 更 新 阶 
段 ， 依 次 调用 的 生命 周期 方法 有 : 


(1) componentWillReceiveProps 
(2) shouldComponentUpdate 
(3) componentWillUpdate 

(4) render 

(5) componentDidUpdate 

















1. componentWillReceiveProps (nextProps) 


这 个 方法 只 在 props 引起 的 组 件 更 新 过 程 中 ， 才 会 被 调用 。State 引起 的 组 件 更 新 并 不 会 触发 
该 方法 的 执行 。 方 法 的 参数 nextProps 是 父 组 件 传递 给 当前 组 件 的 新 的 props。 但 如 上 文 所 述 , 父 组 
件 render 方法 的 调用 并 不 能 保证 传递 给 子 组 件 的 props 发 生变 化 ， 也 就 是 说 nextProps 的 值 可 能 和 
子 组 件 当 前 props 的 值 相等 ， 因 此 往往 需要 比较 nextProps 和 this.props 来 决定 是 否 执 行 props 发 生 
变化 后 的 逻辑 ， 比 如 根据 新 的 props 调用 this.setState 触发 组 件 的 重新 泻 染 。 


(1) 在 componentWillReceiveProps 中 调用 setState， 只 有 在 组 件 render 及 其 之 后 的 方 
法 中 ，this.state 指向 的 才 是 更 新 后 的 state 。 在 render 之 前 的 方法 
shouldComponentUpdate、componentWillUpdate 中 ，this.state 依然 指向 的 是 更 新 
前 的 state。 

(2) 通过 调用 setState 更 新 组 件 状态 并 不 会 触发 componentWillReceiveProps 的 调用 ， 
否则 可 能 会 进入 一 个 死 循环 ，componentWillReceiveProps ~ this.setState 一 
componentWillReceiveProps 一 this.setState…… 


注 意 


2. shouldComponentUpdate (nextProps, nextState ) 


这 个 方法 决定 组 件 是 否 继续 执行 更 新 过 程 。 当 方法 返回 true 时 (true 也 是 这 个 方法 的 默认 返回 
值 ), 组 件 会 继续 更 新 过 程 ; 当 方 法 返回 false 时 ,组 件 的 更 新 过 程 停止 , 后续 的 componentWillUpdate、 
render、componentDidUpdate 也 不 会 再 被 调用 。 一 般 通 过 比较 nextProps、nextState 和 组 件 当前 的 
props、state 决定 这 个 方法 的 返回 结果 。 这 个 方法 可 以 用 来 减少 组 件 不 必要 的 泻 染 ， 从 而 优化 组 件 
的 性 能 。 


3. componentWillUpdate (nextProps, nextState ) 


这 个 方法 在 组 件 render 调用 前 执行 ， 可 以 作为 组 件 更 新 发 生前 执行 某 些 工作 的 地 方 ， 一 般 也 
很 少 用 到 。 
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shouldComponentUpdate 和 componentWillUpdate 中 都 不 能 调用 setState, 否则 会 引起 循 


注意 环 调用 问题 ， Tender 永远 无 法 被 调用 ， 组 件 也 无 法 正常 泻 染 。 


4. componentDidUpdate (prevProps, prevState) 


组 件 更 新 后 被 调用 ， 可 以 作为 操作 更 新 后 的 DOM 的 地 方 。 这 个 方法 的 两 个 参数 prevProps、 
prevState 代表 组 件 更 新 前 的 props 和 state。 


2.3.3 ”和 扼 载 阶段 
组 件 从 DOM 中 被 卸载 的 过 程 ， 这 个 过 程 中 只 有 一 个 生命 周期 方法 : 


componentWillUnmount 

这 个 方法 在 组 件 被 卸载 前 调用 ， 可 以 在 这 里 执行 一 些 清 理工 作 ， 比 如 清除 组 件 中 使 用 的 定时 
器 ， 清 除 componentDidMount 中 手动 创建 的 DOM 元 素 等 ， 以 避免 引起 内 存 泄漏 。 

最 后 还 需要 提醒 大 家 ， 只 有 类 组 件 才 具 有 生命 周期 方法 ， 函 数组 件 是 没有 生命 周期 方法 的 ， 
因此 永远 不 要 在 函数 组 件 中 使 用 生命 周期 方法 。 


2.4 列表 和 Keys 


在 组 件 中 演 染 列表 数据 是 非常 常见 的 场景 ， 例 如 ，BBS 项 目 PostList 组 件 就 需要 根据 列表 数 
据 posts 进行 泻 染 : 


class PostList extends Component { 


/** 省 略 其 余 代码 **/ 


render() { 
return ( 
<div className='container'> 
<h2> 帖 子 列表 </h2> 
<ul> 
{this.state.posts.map (item => 


<PostItem 
post = {item} 
onVote = {this.handleVote} 
/> 
)} 
</ul> 


</div> 
); 
} 
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下 面 运 行 BBS 项 目 ， 然 后 打开 Chrome 浏览 器 的 控制 台 ， 可 以 看 到 如 图 2-5 所 示 的 警告 信息 。 


el 3 x| 


for nore praconsole, is,56 














图 2-5 


警告 信息 提示 我 们 ， 应 该 为 列表 中 的 每 个 元 素 添加 一 个 名 为 key 的 属性 。 那 么 这 个 属性 有 什 
么 作用 呢 ? 原来，React 使 用 key 属性 来 标记 列表 中 的 每 个 元 素 ， 当 列表 数据 发 生变 化 时 ，React 
就 可 以 通过 key 知道 哪些 元 素 发 生 了 变化 ， 从 而 只 重新 泻 染发 生变 化 的 元 素 ， 提 高 泻 染 效率 。 

一 般 使 用 列表 数据 的 ID 作为 key 值 ， 例 如 可 以 使 用 帖子 的 ID 作为 每 一 个 PostItem 的 key: 


class PostList extends Component { 
/xx 省 略 其 余 代码 **/ 


render() { 
return ( 
<div className='container'> 
<h2> 帖 子 列表 </h2> 
<ul> 
{this.state.posts.map (item => 
{/* 将 id 赋值 给 key 属性 ， 作 为 唯一 标识 */} 
<PostItem 
key = {item.id} 
post = {item} 
onVote = {this.handleVote} 
/> 
)} 
</ul> 
</div> 
); 
} 
} 


再 次 运行 程序 ,你 会 发 现 之 前 的 警告 消息 已 经 不 存在 了 。 本 节 项 目 源 代码 的 目录 为 /chapter-02/ 
bbs-components-keys。 


如 果 列表 包含 的 元 素 没有 ID， 也 可 以 使 用 元 素 在 列表 中 的 位 置 索 引 作为 key 值 ， 例 如 : 
// 省 略 其 他 


{this.state.posts.map((item,index) 三 > 
<PostItem 
key = {index} 


post = {item} 
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onVote = {this.handleVote} 
/> 
)} 
但 并 不 推荐 使 用 索引 作为 key， 因 为 一 旦 列表 中 的 数据 发 生 重 排 ， 数 据 的 索引 也 会 发 生变 化 ， 
不 利于 React 的 泻 染 优化 。 我 们 还 会 在 第 5 章 中 详细 说 明 这 一 情况 。 
虽然 列表 元 素 的 key 不 能 重复 ， 但 这 个 唯一 性 仅 限于 在 当前 列表 中 ， 而 不 是 全 局 唯一 。 例 如 
在 一 个 组 件 中 两 次 使 用 postid 作为 列表 数据 的 key: 





function Blog(props) { 
// 侧 边 栏 导 航 区 
const sidebar = ( 
<ul> 
{props.posts.map( (post) => 
<li key={post.id}> 
{post.title} 
</1i> 
yi 
</ul> 
); 
// 帖子 列表 
const content = props.posts.map((post) => 
<div key={post.id}> 
<h3>{post.title}</h3> 
<p>{post.content}</p> 
</div> 
); 
return ( 
<div> 
{sidebar} 
{content} 
</div> 
); 


// posts 结构 
const posts = [ 
{id: 1, title: 'Hello React', content: 'Welcome to learning React!'}, 


{id: 2, title: 'Installation', content: 'You can install React from npm.'} 


]; 
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2.5 事件 处 理 


在 BBS 应 用 中 的 点 赞 功能 已 经 涉及 React 中 的 事件 处 理 ， 本 节 将 详细 介绍 如 何在 React 中 处 
理事 件 。 在 React 元 素 中 绑 定 事件 有 两 点 需要 注意 : 


(1) 在 React 中 ， 事 件 的 命名 采用 驼峰 命名 方式 ， 而 不 是 DOM 元 素 中 的 小 写字 母 命名 方式 。 
例如 ，onclick 要 写成 onClick，onchange 要 写成 onChange 等 。 

(2) 处 理事 件 的 响应 函数 要 以 对 象 的 形式 赋值 给 事件 属性 ， 而 不 是 DOM 中 的 字符 串 形 式 。 
例如 ， 在 DOM 中 绑 定 一 个 点 击 事件 这 样 写 : 


<button onc1lick="clickButton () "> 
Click 
</button> 


而 在 React 元 素 中 绑 定 一 个 点 击 事件 变 成 这 种 形式 : 


<button onclick={clickButton}>  //clickButton 是 一 个 函数 
Click 
</button> 


React 中 的 事件 是 合成 事件 ， 并 不 是 原生 的 DOM 事件 。React 根据 W3C 规范 定义 了 一 套 兼容 
各 个 浏览 器 的 事件 对 象 。 在 DOM 事件 中 ， 可 以 通过 处 理 函 数 返 回 false 来 阻止 事件 的 默认 行为 ， 
但 在 React 事件 中 ， 必 须 显 式 地 调用 事件 对 象 的 preventDefault 方法 来 阻止 事件 的 默认 行为 。 除 了 
这 一 点 外 ，DOM 事件 和 React 事件 在 使 用 上 并 无 差别 。 如 果 在 某 些 场景 下 必须 使 用 DOM 提供 的 
原生 事件 ， 可 以 通过 React 事件 对 象 的 nativeEvent 属性 获取 。 

其 实 ， 在 React 组 件 中 处 理事 件 最 容易 出 错 的 地 方 是 事件 处 理 函 数 中 this 的 指向 问题 ， 因 为 
ES 6 class 并 不 会 为 方法 自动 绑 定 this 到 当前 对 象 。React 事件 处 理 函 数 的 写法 主要 有 三 种 方式 , 不 
同 的 写法 解决 this 指向 问题 的 方式 也 不 同 。 


1. 使 用 箭头 函数 
直接 在 React 元 素 中 采用 箭头 函数 定义 事件 的 处 理 函数 ， 例 如 : 


class MyComponent extends React .Component { 
constructor(props) { 
super (props); 
this.state = {number: 0}; 
} 


render() { 

return ( 
<button onClick={ (event)=>{console.log (this.state.number);}}> 

Click 
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</button> 
Wa 
} 
} 


因为 箭头 函数 中 的 this 指向 的 是 函数 定义 时 的 对 象 ,所 以 可 以 保证 this 总 是 指向 当前 组 件 的 实 
例 对 象 。 当 事件 处 理 逻 辑 比 较 复杂 时 ， 如 果 把 所 有 的 逻辑 直接 写 在 onClick 的 大 括号 内 ， 就 会 导致 
render 函数 变 得 腔 有 种， 不 容易 直观 地 看 出 组 件 的 UI 结构 ， 代 码 可 读 性 也 不 好 。 这 时 ， 可 以 把 逻辑 
封装 成 组 件 的 一 个 方法 ， 然 后 在 箭头 函数 中 调用 这 个 方法 。 代 码 如 下 ; 


class MyComponent extends React.Component { 





constructor(props) { 
super (props); 
this.state = {number: 0}; 
} 
// 每 点 击 一 次 Button，state 中 的 number 增加 1 
handleClick(event) { 
const number = ++this.state.number; 
this.setState({ 
number: number 
1D); 
} 


render() { 
return ( 
<div> 
<div>{this.state.number}</div> 
<button onClick={ (event)=>{this.handleClick (event);}}> 
Click 
</button> 
</div> 
) 7 
站 
} 


直接 在 render 方法 中 为 元 素 事件 定义 事件 处 理 函 数 ， 最 大 的 问题 是 ， 每 次 render 调用 时 ， 都 
会 重新 创建 一 个 新 的 事件 处 理 函 数 ， 带 来 额外 的 性 能 开销 ， 组 件 所 处 层级 越 低 ， 这 种 开销 就 越 大 ， 
因为 任何 一 个 上 层 组 件 的 变化 都 可 能 会 触发 这 个 组 件 的 render 方法 。 当 然 ， 在 大 多 数 情 况 下 ， 这 
点 性 能 损失 是 可 以 不 必 在 意 的 。 

2. 使 用 组 件 方法 


直接 将 组 件 的 方法 赋值 给 元 素 的 事件 属性 ， 同 时 在 类 的 构造 函数 中 ， 将 这 个 方法 的 this 绑 定 
到 当前 对 象 。 例 如 : 
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class MyComponent extends React.Component { 


constructor(props) { 
super (props); 
this.state = {number: 0}; 
this.handleClick = this.handleClick.bind (this); 


} 
// 每 点 击 一 次 Button，state 中 的 number 增加 1 


handleClick(event) { 
const number = ++this.state.number; 
this.setState({ 
number: number 
1D); 
} 
render() { 
return ( 


<div> 
<div>{this.state.number}</div> 


<button onClick={this.handleClick}> 
Click 
</button> 
</div> 


) 7 


} 
这 种 方式 的 好 处 是 每 次 render 不 会 重新 创建 一 个 回调 函数 ， 没 有 额外 的 性 能 损失 。 但 在 构造 


函数 中 ， 为 事件 处 理 函数 绑 定 this， 尤 其 是 存在 多 个 事件 处 理 函 数 需要 绑 定时 ， 这 种 模板 式 的 代码 
还 是 会 显得 烦琐 。 
有 些 开 发 者 还 习惯 在 为 元 素 的 事件 属性 赋值 时 ， 同 时 为 事件 处 理 函 数 绑 定 this， 例 如 : 
class MyComponent extends React.Component { 
constructor (props) { 


super (props); 
this.state = {number: 0}; 


} 
// 每 点 击 一 次 Button，state 中 的 number 增加 1 


handleClick(event) { 
const number = ++this.state.number; 


this.setState({ 
number: number 


Ds; 
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render() { 
return ( 

<div> 
<div>{this.state.number}</div> 
{/* 事件 属性 赋值 和 this 绑 定 同时 */} 
<button onClick={this.handleClick.bind(this)}> 

Click 

</button> 

</div> 


); 


} 


使 用 bind 会 创建 一 个 新 的 函数 ， 因 此 这 种 写法 依然 存在 每 次 render 都 会 创建 一 个 新 函数 的 问 
题 。 但 在 需要 为 处 理 函数 传递 额外 参数 时 ， 这 种 写法 就 有 了 用 武之 地 。 例 如 ， 下 面 的 例子 需要 为 
handleClick 传 入 参数 item: 


class MyComponent extends React.Component { 
constructor (props) { 
super (props); 
this.state = { 
igts. [llr2r3rdls 
current: 1 
] 
} 
// 点 击 每 一 项 时 ， 将 点 击 项 设置 为 当前 选中 项 ， 因 此 需要 把 点 击 项 作为 参数 传递 
handleClick(item, event) { 
this.setState({ 
current: item 
Ws 


render() { 
return ( 
<ul> 


{this.state.list.map( 


(item)=>( 
{/* bind 除了 绑 定 this， 还 绑 定 item 作为 参数 ， 供 handleclick 使 用 */} 
<li className={this.state.current === item ? 'current':''} 


onClick={this.handleClick.bind(this, item)}>{item} 


</1i> 
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</ul> 


3. 属性 初始 化 语法 (property initializer syntax) 
使 用 ES 7 的 property initializers 会 自动 为 class 中 定义 的 方法 绑 定 this。 例 如 : 


class MyComponent extends React.Component { 
constructor (props) { 
super (props); 
this.state = {number: 0}; 
$ 
// ES7 的 属性 初始 化 语法 ， 实 际 上 也 是 使 用 了 箭头 函数 
handleClick = (event) => { 
const number = ++this.state.number; 
this.setState({ 
number: number 
DD); 
} 


render() { 
return ( 
<div> 
<div>{this.state.number}</div> 
<button onClick={this.handleClick}> 
Click 
</button> 
</div> 
); 
$ 
} 


这 种 方式 既 不 需要 在 构造 函数 中 手动 绑 定 this, 也 不 需要 担心 组 件 重复 泻 染 导 致 的 函数 重复 创 
建 问题 。 但 是 ，property initializers 这 个 特性 还 处 于 试验 阶段 ， 默 认 是 不 支持 的 。 不 过 ， 使 用 官方 
脚手架 Create React App 创建 的 项 目 默认 是 支持 这 个 特性 的 。 你 也 可 以 自行 在 项 目 中 引入 babel 的 
transform-class-properties 插件 获取 这 个 特性 支持 。 


2.6 表 单 


在 有 交互 的 Web 应 用 中 ， 表 单 是 必 不 可 少 的 。 但 是 ， 和 其 他 元 素 相 比 ， 表 单元 素 在 React 中 
的 工作 方式 存在 一 些 不 同 。 像 div、p、span 等 非 表 单元 素 只 需 根据 组 件 的 属性 或 状态 进行 泻 染 即 
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可 ， 但 表单 元 素 自 身 维护 一 些 状态 ， 而 这 些 状 态 默 认 情况 下 是 不 受 React 控制 的 。 例 如 ，input 元 
素 会 根据 用 户 的 输入 自动 改变 显示 的 内 容 , 而 不 是 从 组 件 的 状态 中 获取 显示 的 内 容 。 我 们 称 这 类 状 
态 不 受 React 控制 的 表单 元 素 为 非 受 控 组 件 。 在 React 中 ， 状 态 的 修改 必须 通过 组 件 的 state， 非 受 
控 组 件 的 行为 显然 有 悖 于 这 一 原则 。 为 了 让 表单 元 素 状态 的 变更 也 能 通过 组 件 的 state 管理 ，React 
采用 受 控 组 件 的 技术 达到 这 一 目的 。 


2.6.1 受 控 组 件 


如 果 一 个 表单 元 素 的 值 是 由 React 来 管理 的 ， 那 么 它 就 是 一 个 受 控 组 件 。React 组 件 泻 染 表单 
元 素 ， 并 在 用 户 和 表单 元 素 发 生 交互 时 控制 表单 元 素 的 行为 ， 从 而 保证 组 件 的 state 成 为 界面 上 所 
有 元 素 状态 的 唯一 来 源 。 对 于 不 同 的 表单 元 素 ，React 的 控制 方式 略 有 不 同 ， 下 面 我 们 就 来 看 一 下 
三 类 常用 表单 元 素 的 控制 方式 。 


1. 文本 框 


文本 框 包含 类 型 为 text 的 input 元 素 和 textarea 元 素 。 它 们 受 控 的 主要 原理 是 ， 通 过 表单 元 素 
的 value 属性 设置 表单 元 素 的 值 ， 通 过 表单 元 素 的 onChange 事件 监听 值 的 变化 ， 并 将 变化 同步 到 
React 组 件 的 state 中 。 下 面 是 一 个 例子 。 


class LoginForm extends React.Component { 





constructor (props) { 
super (props); 
this.state = {name: '', password: ''}; 
this.handleChange = this.handleChange.bind(this); 
this.handleSubmit = this.handleSubmit.bind(this); 


} 
// 监听 用 户 名 和 密码 两 个 input 值 的 变化 
handleChange (event) { 
const target = event.target; 
this.setState ({ [target.name] : target.value}); 
// 表单 提交 的 响应 函数 
handleSubmit (event) { 
console.log('login successfully'); 
event .preventDefault (); 
} 


render() { 
return ( 
<form onsubmit={this.handlesubmit}> 
<label> 
用 户 名 : 
{/* 通过 value 设置 input 显示 内 容 ， 通 过 onchange 监听 value 的 变化 */} 
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<input type="text" name="name" value={this.state.name} 
onChange={this.handleChange} /> 
</label> 
<label> 
密码 : 
<input type="password" name="password" value={this.state.password} 
onChange={this.handleChange} /> 
</label> 
<input type="submit" value=" 登 录 " /> 
</form> 
); 
} 
} 


用 户 名 和 密码 两 个 表单 元 素 的 值 是 从 组 件 的 state 中 获取 的 ， 当 用 户 更 改 表单 元 素 的 值 时 ， 
onChange 事件 会 被 触发 ， 对 应 的 handleChange 处 理 函数 会 把 变化 同步 到 组 件 的 state， 新 的 state 
又 会 触发 表单 元 素 重新 泻 染 ， 从 而 实现 对 表单 元 素 状态 的 控制 。 

这 个 例子 还 包含 一 个 处 理 多 个 表单 元 素 的 技巧 ， 通 过 为 两 个 input 元 素 分 别 指定 name 属性 ， 
使 用 同一 个 函数 handleChange 处 理 元 素 值 的 变化 , 在 处 理 函 数 中 根据 元 素 的 name 属性 区 分 事件 的 
来 源 。 这 样 的 写法 显然 比 为 每 一 个 input 元 素 指定 一 个 处 理 函 数 简洁 得 多 。 

textarea 的 使 用 方式 和 input 几乎 一 致 ， 这 里 不 再 歼 述 。 


2. 列表 
列表 select 元 素 是 最 复杂 的 表单 元 素 ， 它 可 以 用 来 创建 一 个 下 拉 列 表 : 


<select> 
<option value="react">React</option> 
<option value="redux">Redux</option> 
<option selected value="mobx">MobX</option> 


</select> 


通过 指定 selected 属性 可 以 定义 哪 一 个 选项 (option) 处 于 选中 状态 , 所 以 上 面 的 例子 中 , Mobx 
这 一 选项 是 列表 的 初始 值 ， 处 于 选中 状态 。 在 React 中 ， 对 select 的 处 理 方式 有 所 不 同 ， 它 通过 在 
select 上 定义 value 属性 来 决定 哪 一 个 option 元 素 处 于 选中 状态 。 这 样 ， 对 select 的 控制 只 需要 在 
select 这 一 个 元 素 上 修改 即 可 ， 而 不 需要 关注 option 元 素 。 下 面 是 一 个 例子 : 


class ReactStackForm extends React.Component { 
constructor(props) { 
super (props); 
this.state = {value: 'mobx'}; 
this.handleChange = this.handleChange.bind(this); 
this.handleSubmit = this.handleSubmit.bind(this); 
} 
// 监听 下 拉 列 表 的 变化 
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handleChange (event) { 
this.setSstate({value: event.target.value}); 
} 
// 表单 提交 的 响应 函数 
handleSubmit (event) { 
alert('You picked ' + this.state.value); 


event .preventDefault (); 


render() { 
return ( 
<form onSubmit={this.handleSubmit}> 
<label> 
Pick one library: 
{/* select 的 value 属性 定义 当前 哪个 option 元 素 处 于 选中 状态 */} 
<select value={this.state.value} onChange={this.handleChange}> 
<option value="react">React</option> 
<option value="redux">Redux</option> 
<option value="mobx">MobX</option> 
</select> 
</label> 
<input type="submit" value="Submit" /> 
</form> 
) 7 


} 
3. 复 选 框 和 单 选 框 


复 选 框 是 类 型 为 checkbox 的 input 元 素 ， 单 选 框 是 类 型 为 radio 的 input 元 素 ， 它 们 的 受 控 方 
式 不 同 于 类 型 为 text 的 input 元 素 。 通 常 ， 复 选 框 和 单 选 框 的 值 是 不 变 的 ， 需 要 改变 的 是 它们 的 
checked 状态 ， 因 此 React 控制 的 属性 不 再 是 value 属性 ， 而 是 checked 属性 。 例 如 : 


class ReactStackEForm extends React.Component { 

constructor (props) { 
super (props); 
this.state = { react: false, redux: false, mobx: false }; 
this.handleChange = this.handleChange.bind(this); 
this.handleSubmit = this.handleSubmit.bind(this); 

下 

// 监听 复 选 框 变化 ， 设 置 复 选 框 的 checked 状态 

handleChange (event) { 


this.setState({ [event.target.name]: event.target.checked }); 
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// 表单 提交 的 响应 函数 
handleSubmit (event) { 


event .preventDefault (); 


render() { 
return ( 
<form onSubmit={this.handleSubmit}> 
{/* 设置 3 个 复 选 框 */} 
<label>React 
<input 
type="checkbox" 
name="react™" 
value="react" 
checked={this.state.react} 
onChange={this.handleChange} 
Pg 
</label> 
<label>Redux 
<input 
type="checkbox" 
name="redux" 
value="redux" 
checked={this.state.redux} 
onChange={this.handleChange} 
FE 
</label> 
<label>Mobx 
<input 
type="checkbox" 
name="mobx" 
value="mobx" 
checked={this.state .mobx} 
onChange={this.handleChange} 
/> 
</label> 
<input type="submit" value="Submit" /> 
</form> 


3 


} 
上 面 的 例子 中 ，input 的 value 是 不 变 的 ，onChange 事件 改变 的 是 input 的 checked 属性 。 单 选 
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框 的 用 法 和 复 选 框 相 似 ， 读 者 可 自行 尝试 使 用 。 
下 面 为 BBS 项 目 添加 表单 元 素 ， 让 每 一 个 帖子 的 标题 支持 编辑 功能 。 本 节 项 目 源 代码 的 目录 
为 /chapter-02/bbs-components-form。 修 改 后 的 PostItem 如 下 : 


class PostItem extends Component { 
constructor (props) { 
super (props); 
this.state = { 
editing: false, // 帖子 是 否 处 于 编辑 态 
post: props.post 
ys 
this.handleVote = this.handleVote.bind (this); 
this.handleEditPost = this.handleEditPost.bind(this); 
this.handleTitleChange = this.handleTitleChange.bind(this); 


componentWillReceiveProps (nextProps) { 
// 父 组 件 更 新 post 后 ， 更 新 PostItem 的 state 
if (this.props.post !== nextProps.post) { 
this.setState({ 
post: nextProps.post 
WR 


} 
// 处 理 点 赞 事件 
handleVote () { 
this.props.onVote (this.props.post.id); 
} 
// 保存 /编辑 按钮 点 击 后 的 逻辑 
handleEditPost() { 
const editing = this.state.editing; 
// 当前 处 于 编辑 态 ， 调 用 父 组 件 传递 的 onsave 方法 保存 帖子 
if (editing) { 
this.props.onSave({ 
sthis .state posts 
date: this.getFormatDate() 
1D); 
} 
this.setSstate({ 
editing: !editing 
Ds 
站 
// 处 理 标题 textarea 值 的 变化 
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handleTitleChange (event) { 
const newPost = { ...this.state.post, title: event.target.value }; 
this.setSstatel({ 
post: newPost 


Ds 


getFormatDate() { 


// 省 略 


render() { 
const { post } = this.state; 
return ( 
<1li className="item"> 
<div className="title"> 
{this.state.editing 
? <form> 
<textarea 
value={post.title} 
onChange={this.handleTitleChange} 
Pi 
</form> 
: post.title} 
</div> 
<div> 
创建 人 : <span>{post.author}</span> 
</div> 
<div> 
创建 时 间 : <span>{post.date}</span> 
</div> 
<div className="like"> 
<span> 
<img alt="vote" src={like} onClick={this.handleVote} /> 
</span> 
<span> 
{post .vote} 
</span> 
</div> 
<div> 
<button onClick={this.handleEditPost}> 
{this.state.editing ? "保存 " : "编辑 "} 


</button> 
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当 点 击 编辑 状态 的 button 时 ， 帖 子 的 标题 会 使 用 textarea 展示 ， 此 时 标题 处 于 可 编辑 状态 ， 当 
再 次 点 击 button 时 , 会 执行 保存 操作 ，PostItem 通过 onSave 属性 调用 父 组 件 PostList 的 handleSave 
方法 ， 将 更 新 后 的 Post (标题 和 时 间 ) 保存 到 PostList 的 state 中 。PostList 中 的 修改 如 下 : 


class PostList extends Component { 


/xx 省 略 其 余 代码 **/ 


// 保存 帖子 
handleSave (Post) { 
// 根据 post 的 id， 过滤 出 当前 要 更 新 的 post 
const posts = this.state.posts.map (item => { 
const newItem = item.id === post.id ? post : item; 
return newItem; 
this.setState({ 
Posts 
}) 


render() { 
return ( 
<div className='container'> 
<h2> 帖 子 列表 </h2> 
<ul> 
{this.state.posts.map (item => 
<PostItem 
key = {item.id} 
post = {item} 
onVote = {this.handleVote} 
onSave = {this.handleSave} 
/> 
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2.6.2 ” 非 受 控 组 件 


使 用 受 控 组 件 虽然 保证 了 表单 元 素 的 状态 也 由 React 统一 管理 ， 但 需要 为 每 个 表单 元 素 定义 
onChange 事件 的 处 理 函 数 ， 然 后 把 表单 状态 的 更 改 同步 到 React 组 件 的 state， 这 一 过 程 是 比较 烦 
琐 的 , 一 种 可 替代 的 解决 方案 是 使 用 非 受 控 组 件 。 非 受 控 组 件 指 表单 元 素 的 状态 依然 由 表单 元 素 自 
己 管理 ， 而 不 是 交 给 React 组 件 管理 。 使 用 非 受 控 组 件 需要 有 一 种 方式 可 以 获取 到 表单 元 素 的 值 ， 
React 中 提供 了 一 个 特殊 的 属性 ref， 用 来 引用 React 组 件 或 DOM 元 素 的 实例 ， 因 此 我 们 可 以 通过 
为 表单 元 素 定义 ref 属性 获取 元 素 的 值 。 例 如 : 


class SimpleForm extends Component 1{ 
constructor (Props) { 
super (Props) 7 
this.handleSubmit = this.handleSubmit.bind(this)7 


handleSubmit (event) { 
// 通过 this .input 获取 到 input 元 素 的 值 
alert('The title You submitted was ' + this.input.value); 
eVent .preventDefault (); 


} 


render() { 
return ( 
<form onSubmit={this.handleSubmit}> 
<label> 
title: 
{/* this.input 指向 当前 input 元 素 */} 
<input type="text" ref={ (input) => this.input = input} /> 
</label> 
<input type="submit" value="Submit" /> 
</form> 
a 
} 
} 


ref 的 值 是 一 个 函数 ， 这 个 函数 会 接收 当前 元 素 作为 参数 ， 即 例子 中 的 input 参数 指向 的 是 当 
前 元 素 。 在 函数 中 ， 我 们 把 input 赋值 给 了 this.input， 进 而 可 以 在 组 件 的 其 他 地 方 通过 this.input 
获取 这 个 元 素 。 

在 使 用 非 受 控 组 件 时 ， 我 们 常常 需要 为 相应 的 表单 元 素 设置 默认 值 ， 但 是 无 法 通过 表单 元 素 
的 value 属性 设置 ， 因 为 非 受 控 组 件 中 ，React 无 法 控制 表单 元 素 的 value 属性 ， 这 也 就 意味 着 一 旦 
在 非 受 控 组 件 中 定义 了 value 属性 的 值 ， 就 很 难保 证 后 续 表单 元 素 的 值 的 正确 性 。 这 种 情况 下 ， 我 
们 可 以 使 用 defaultValue 属性 指定 默认 值 : 
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render() { 
return ( 
<form onSubmit={this-handleSubmit}> 
<label> 
title: 
<input defaultValue="something" type="text" ref={ (input) => 
this.input = input} /> 
</label> 
<input type="submit" value="Submit" /> 
</form> 
); 
} 

上 面 的 例子 , defaultValue 设置 的 默认 值 为 something, 而 后 续 值 的 更 改 则 由 自己 控制 。 类 似 地 ， 
select 元 素 和 textarea 元 素 也 支持 通过 defaultValue 设置 默认 值 ，<input type="checkbox"> 和 <input 
type="radio"> 则 支持 通过 defaultChecked 属性 设置 默认 值 。 

非 受 控 组 件 看 似 简化 了 操作 表单 元 素 的 过 程 , 但 这 种 方式 破坏 了 React 对 组 件 状态 管理 的 一 致 
性 ， 往 往 容易 出 现 不 容易 排查 的 问题 ， 因 此 非特 殊 情 况 下 ， 不 建议 大 家 使 用 。 


2.7 本章 小 结 


本 章 详细 介绍 了 React 的 主要 特性 及 其 用 法 。React 通过 JSX 语法 声明 界面 UI， 将 界面 UI 和 
它 的 逻辑 封装 到 同一 个 JS 文件 中 。 组 件 是 React 的 核心 ， 根 据 组 件 的 外 部 接口 props 和 内 部 接口 
state 完成 自身 UI 的 泻 染 。 使 用 组 件 时 ， 需 要 理解 它 的 生命 周期 ， 借 助 不 同 的 生命 周期 方法 ， 组 件 
可 以 实现 复杂 逻辑 。 组 件 在 演 染 列表 数据 时 ， 要 注意 key 的 使 用 ， 在 事件 处 理 时 ， 要 注意 事件 名 和 
事件 处 理 函数 的 写法 。 最 后 介绍 了 React 中 表单 元 素 的 用 法 ， 表 单元 素 的 使 用 方式 分 为 受 控 组 件 和 
非 受 控 组 件 。 





React 16 新 特性 


React 16 是 Facebook 在 2017 年 9 月 发 布 的 React 最 新 版 本 。React 16 基于 代号 为 “Fiber” 的 
新 架构 实现 ， 几 乎 对 React 的 底层 代码 进行 了 重 写 , 但 对 外 的 API 基本 不 变 ， 所 以 开发 者 可 以 几乎 
无 颖 地 迁移 到 React 16。 此 外 ， 基 于 新 的 架构 ，React 16 实现 了 许多 新 特性 。 


3.1 render 新 的 返回 类 型 


React 16 之 前 ，render 方法 必须 返回 单个 元 素 。 现 在 ，render 方法 支持 两 种 新 的 返回 类 型 : 数组 
(由 React 元 素 组 成 ) 和 字符 串 。 定 义 一 个 ListComponent 组 件 ， 它 的 render 方法 返回 数组 : 


class ListComponent extends Component { 
render() { 
return [ 
<1i key="A">First item</1i>, 
<1i key="B">Second item</1i>, 
<1i key="C">Third item</1i> 
]; 
} 
} 


再 定义 一 个 StringComponent 组 件 ， 它 的 render 方法 返回 字符 串 : 


class StringComponent extends Component { 


render() { 


第 1 篇 基础 篇 一 -React， 一 种 革命 性 的 UI 开发 理念 





return "Just a Strings"7 
} 
} 


App 组 件 的 render 方法 泻 染 ListComponent 和 StringComponent: 


export default class App extends Component { 
render() { 
return [ 
<ul> 
<ListComponent /> 
</ul>, 
<StringComponent /> 
]; 
} 
} 


本 节 项 目 源 代码 的 目录 为 /chapter-03/react16-render。 


3.2 ”错误 处 理 


React 16 之 前 ,组 件 在 运行 期 间 如 果 执 行 出 错 ， 就 会 阻塞 整个 应 用 的 泻 染 ， 这 时 候 只 能 刷新 页 


面 才能 恢复 应 用 。React 16 引入 了 新 的 错误 处 理 机 制 ， 默 认 情 况 下 ， 当 组 件 中 抛 出 错误 时 ， 这 个 组 
件 会 从 组 件 树 中 卸载 ， 从 而 避免 整个 应 用 的 崩溃 。 这 种 方式 比 起 之 前 的 处 理 方式 有 所 进步 ， 但 用 户 
体验 依然 不 够 友好 。React 16 还 提供 了 一 种 更 加 友好 的 错误 处 理 方式 一 一 错误 边界 (Error 
Boundaries) 。 错 误 边界 是 能 够 捕获 子 组 件 的 错误 并 对 其 做 优雅 处 理 的 组 件 。 优 雅 的 处 理 可 以 是 输 


出 错误 日 志 、 显 示 出 错 提示 等 ， 显 然 这 比 直 接 秃 载 组 件 要 更 加 友好 。 
定义 了 componentDidCatch(error, info) 这 个 方法 的 组 件 将 成 为 一 个 错误 边界 ， 现 在 我 们 创建 一 
个 组 件 ErrorBoundary: 


class ErrorBoundary extends React.Component { 
constructor(props) { 
super (props); 
this.state = { hasError: false }; 
下 


componentDidCatch (error, info) { 
// 显示 错误 UI 
this.setstate({ hasError: true }); 
// 同时 输出 错误 日 志 
console.logl(error, info); 


} 
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render() { 
if (this.state.hasError) { 
return <hl>Oops, something went wrong.</hl>; 


} 


return this.props.children; 


} 
然后 在 App 中 使 用 ErrorBoundary: 


class App extends Component { 
constructor (props) { 
super (props); 
this.state = { 
user: { name: "react" } 
}; 
} 
// 将 user 置 为 nul1， 模 拟 异 常 
onclick = () => { 
this.setState({ user: null }); 
}; 


render() { 
return ( 
<div> 
<ErrorBoundary> 
<Profile user={this.state.user} /> 
</ErrorBoundary> 
<button onCclick={this .onCclickl> 更 新 </button> 
</div> 
); 


const Profile = ({ user }) => <div>name: {user.name}</div>; 


点 击 更 新 按钮 后 ，Profile 接收 到 的 属性 user 为 null， 程 序 会 抛 出 TypeError， 这 个 错误 会 被 
ErrorBoundary 捕获 ， 并 在 界面 上 显示 出 错 提示 。 注 意 ， 使 用 create-react-app 创建 的 项 目 ， 当 程序 
发 生 错 误 时 ，create-react-app 会 在 页 面 上 创建 一 个 浮 层 显示 错误 信息 ， 要 观察 ErrorBoundary 的 正 
确 效果 ， 需 要 先 关闭 错误 浮 层 。 

本 节 项 目 源 代码 的 目录 为 /chapter-03/react16-error-boundary。 
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3.3 Portals 


React 16 的 Portals 特性 让 我 们 可 以 把 组 件 泻 染 到 当前 组 件 树 以 外 的 DOM 节点 上 ， 这 个 特性 


典型 的 应 用 场景 是 泻 染 应 用 的 全 局 弹 框 ， 使 用 Portals 后 ， 任 意 组 件 都 可 以 将 弹 框 组 件 泻 染 到 根 节 


点 上 ， 以 方便 弹 框 的 显示 。Portals 的 实现 依赖 ReactDOM 的 一 个 新 的 API: 


ReactDOM.createPortal (child, container) 


第 一 个 参数 child 是 可 以 被 泻 染 的 React 节点 , 例如 React 元 素 、 由 React 元 素 组 成 的 数组 、 字 
符 串 等 ，container 是 一 个 DOM 元 素 ，child 将 被 挂 载 到 这 个 DOM 节点 。 
我 们 创建 一 个 Modal 组 件 ，Modal 使 用 ReactDOM.createPortal0 在 DOM 根 节点 上 创建 一 个 


class Modal extends Component { 
constructor (Pops) { 
super (props); 
// 根 节点 下 创建 一 个 div 节点 
this.container = document.createElement ("div"); 
document .body.appendChild(this.container); 
} 


componentWillUnmount() { 
document .body.removeChild(this.container); 


} 


render() { 
// 创建 的 DoM 树 挂 载 到 this .container 指向 的 div 节点 下 面 
return ReactDOM.createPortal( 
<div className="modal"> 
<span className="close" onClick={this.props.onClose}> 
&times; 
</span> 
<div className="content"> 
{this.props.children} 
</div> 
</div>, 
this.container 


); 
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在 App 中 使 用 Modal: 


class App extends Component { 
constructor (props) { 
super (props); 
this.state = { showModal: true }; 
} 
// 关闭 弹 框 
closeModal = () => { 
this.setState({ showModal: false }) 7 
] 7 


render() { 
return ( 
<div> 
<h2>Dashboard</h2> 
{this.state.showModal && ( 
<Modal onClose={this.closeModal}>Modal Dialog</Modal> 


六 
</div> 
) 7 


export default App; 


本 节 项 目 源 代码 的 目录 为 /chapter-03/react16-portals。 
3.4 自 定义 DOM 属性 


React 16 之 前 会 忽略 不 识别 的 HTML 和 SVG 属性 ,现在 React 会 把 不 识别 的 属性 传递 给 DOM 
元 素 。 例 如 ，React 16 之 前 ， 下 面 的 React 元 素 


<div custom-attribute="something" /> 


在 浏览 器 中 泻 染 出 的 DOM 节点 为 : 


<div /> 
而 React 16 演 染 出 的 DOM 节点 为 : 


<div custom-attribute="something" /> 


本 节 项 目 源 代码 的 目录 为 /chapter-03/react16-custom-dom。 


58 第 1 篇 基础 篇 一 -React， 一 种 革命 性 的 UI 开发 理念 





3.5 本 章 小 结 





本 章 介 绍 了 React 16 的 新 特性 ， 主 要 包括 render 方法 新 支持 的 返回 类 型 、 新 的 错误 处 理 机 制 
和 Error Boundary 组 件 、 可 以 将 组 件 挂 载 到 任意 DOM 树 的 Portals 特性 以 及 自 定 义 DOM 属性 的 支 
持 。 这 些 只 是 React 16 常用 的 特性 ， 除 此 之 外 ，React 16 还 有 其 他 的 新 特性 , 例如 setState 传 入 null 
时 不 会 再 触发 组 件 更 新 、 更 加 高 效 的 服务 器 端 泻 染 方式 等 。 相 信 基 于 新 的 Fiber 架构 ，React 16 还 
会 推出 更 多 更 强大 的 特性 。 


第 2 篇 ” 进 阶 篇 


用 好 React， 你 必须 要 知道 的 那些 事 





深入 理解 组 件 


在 第 2 章 中 已 经 介绍 了 React 组 件 的 基本 用 法 ， 本 章 将 继续 探究 React 组 件 ， 从 组 件 的 state、 
组 件 与 服务 器 通信 、 组 件 通 信 、 组 件 的 ref 属性 4 个 方面 深入 讲解 组 件 ， 帮 助 读者 在 项 目 中 正确 地 
使 用 组 件 。 


4.1 组 件 state 


4.1.1 设计 合适 的 state 


组 件 state 必须 能 代表 一 个 组 件 UI 呈现 的 完整 状态 集 ， 即 组 件 的 任何 UI 改变 都 可 以 从 state 
的 变化 中 反映 出 来 ; 同时 ，state 还 必须 代表 一 个 组 件 UI 呈现 的 最 小 状态 集 ， 即 state 中 的 所 有 状态 
都 用 于 反映 组 件 UI 的 变化 ， 没 有 任何 多 余 的 状态 ， 也 不 应 该 存在 通过 其 他 状态 计算 而 来 的 中 间 
我 们 通过 一 个 例子 来 解释 上 面 的 定义 。 假 设 需要 开发 一 个 购物 车 组 件 ， 需 要 展示 的 信息 有 购 
买 的 物品 列表 以 及 物品 的 总 金额 。 设 计 一 个 错误 的 state: 
// 错误 的 state 示例 
{ 
purchaseList:[], 
totalCost: 0 
} 


这 里 的 state 是 初始 状态 ， 因 此 purchaseList 初始 化 为 一 个 空 数组 ，totalCost 初始 化 为 0， 这 个 
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state 的 设计 确实 可 以 满足 组 件 UI 呈现 的 完整 状态 集 这 一 条 件 ， 但 是 它 包 含 一 个 无 用 的 状态 
totalCost, 因为 totalCost 可 以 根据 购买 的 每 一 项 物品 的 价格 和 数量 计算 得 出 ,所 以 有 了 purchaseList， 
就 可 以 计算 出 totalCost，totalCost 属于 中 间 状 态 ， 可 以 省 略 。 

state 所 代表 的 一 个 组 件 UI 呈现 的 完整 状态 集 又 可 以 分 成 两 类 数据 : 用 作 演 染 组 件 时 使 用 到 的 
数据 的 来 源 以 及 用 作 组 件 UI 展现 形式 的 判断 依据 。 例 如 ， 下 面 的 Hello 组 件 定义 了 user 和 display 
作为 组 件 state, user 是 组 件 最 终 要 在 界面 上 呈现 的 数据 , 而 display 决定 了 <hl> 标 签 是 否 需要 演 染 ， 
是 组 件 UI 呈现 形式 的 判断 依据 。 


class Hello extends React .Component { 
constructor(props) { 
super (props); 
this.state = { 
user 2 "React', 
display: true 
} 
} 


render() { 
return ( 
<div> 
{ 
this.state.display ? 
<hl>Hello, {this.state.user}</hl> : null 
1 
</div> 
); 
} 
} 


state 还 容易 和 props 以 及 组 件 的 普通 属性 混淆 。 这 是 我 们 第 一 次 提 到 组 件 的 普通 属性 ， 所 以 
先 明确 一 下 组 件 普通 属性 的 定义 。 我 们 的 组 件 都 是 使 用 ES6 的 class 定义 的 ， 所 以 组 件 的 属性 其 实 
也 就 是 class 的 属性 (更 确切 的 说 法 是 class 实例 化 对 象 的 属性 ， 但 因为 JavaScript 本 质 上 是 没有 类 
的 定义 的 ，class 只 不 过 是 ES6 提供 的 语法 糖 ， 所 以 这 里 模糊 化 类 和 对 象 的 区 别 ) 。 在 ES6 中 ， 可 
以 使 用 this.{ 属 性 名 } 定 义 一 个 class 的 属性 , 也 可 以 说 属性 是 直接 挂 载 到 this 下 的 变量 。 因此 , state、 
props 实际 上 也 是 组 件 的 属性 ， 只 不 过 它们 是 React 为 我 们 在 Component class 中 预定 义 好 的 属性 。 
除了 state、props 以 外 的 其 他 组 件 属 性 称 为 组 件 的 普通 属性 。 

假设 一 个 组 件 需要 显示 当前 时 间 ， 并 且 这 个 时 间 每 秒 都 会 自动 更 新 ， 这 个 组 件 内 就 需要 定义 
一 个 计时 器 ， 在 这 个 计时 器 中 每 隔 1 秒 更 新 一 次 组 件 的 state。 这 个 计时 器 变量 并 不 适合 定义 到 组 
件 的 state 中 , 因为 它 并 不 代表 组 件 UI 呈现 状态 , 它 只 是 用 来 更 改组 件 的 state, 这 时 就 到 了 组 件 的 
普通 属性 发 挥 作用 的 时 候 了 。 例 如 ， 下 面 的 代码 为 Hello 组 件 定义 了 timer 属性 ， 用 来 定时 更 新 组 
件 状态 : 
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class Hello extends React.Component { 


constructor(props) { 


super (props); 


this.timer = null;  // 普 通 属性 


this.state = { 


date : new Date() 


} 
this.updateDate 
} 


= this.updateDate.bind (this); 


componentDidMount () { 
this.timer = setIinterval (this.updateDate, 1000) 


} 


componentWillUnmount () { 


clearIinterval (this.timer); 


} 


updateDate(){ 
this.setState({ 


date: new Date () 


DD); 
} 


render() { 
return ( 
<div> 


<hl>Hello</h1> 
<hl>{this.state.date.tostring()}</h1l> 


</div> 
) 7 
} 
} 





因此 ， 当 我 们 在 组 件 中 需要 用 到 一 个 变量 ， 并 且 它 与 组 件 的 泻 染 无 关 时 ， 就 应 该 把 这 个 变量 


定义 为 组 件 的 普通 属性 ， 直 接 挂 载 到 this 下 ， 而 不 是 作为 组 件 的 state。 还 有 一 个 更 加 直观 的 判断 
方法 ， 就 是 看 组 件 render 方法 中 有 没有 使 用 到 这 个 变量 ， 如 果 没 有 ， 它 就 是 一 个 普通 属性 。 


state 和 props 又 有 什么 





区 别 呢 ? state 和 props 都 直接 和 组 件 的 UI 渲染 有 关 ， 它 们 的 变化 都 会 


触发 组 件 重新 渲染 ， 但 props 对 于 使 用 它 的 组 件 来 说 是 只 读 的 ， 是 通过 父 组 件 传递 过 来 的 ， 要 想 修 
改 props， 只 能 在 父 组 件 中 修改 ;而 state 是 组 件 内 部 自己 维护 的 状态 ， 是 可 变 的 。 
总 结 一 下 ， 组 件 中 用 到 的 一 个 变量 是 不 是 应 该 作为 state 可 以 通过 下 面 的 4 条 依据 进行 判断 : 


(1) 这 个 变量 是 否 通过 props 从 父 组 件 中 获取 ? 如 果 是 ， 那 么 它 不 是 一 个 状态 。 
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(2) 这 个 变量 是 否 在 组 件 的 整个 生命 周期 中 都 保持 不 变 ? 如 果 是 ， 那 么 它 不 是 一 个 状态 。 

(3) 这 个 变量 是 否 可 以 通过 其 他 状态 (state) 或 者 属性 (props) 计算 得 到 ? 如 果 是 ， 那 么 它 
不 是 一 个 状态 。 

(4) 这 个 变量 是 否 在 组 件 的 render 方法 中 使 用 ? 如 果 不 是 ， 那 么 它 不 是 一 个 状态 。 这 种 情况 
下 ， 这 个 变量 更 适合 定义 为 组 件 的 一 个 普通 属性 。 
4.1.2 正确 修改 state 

state 可 以 通过 this.state.{ 属 性 } 的 方式 直接 获取 , 但 当 修改 state 时 , 往往 有 很 多 陷阱 需要 注意 。 
下 面 介绍 常见 的 三 种 陷阱 : 

1. 不 能 直接 修改 state 


直接 修改 state， 组 件 并 不 会 重新 触发 render。 例 如 : 


// 错误 
this.state.title = "React'7 
正确 的 修改 方式 是 使 用 setState0): 
// 正确 


this.setState({title: 'React'}); 


2. state 的 更 新 是 异步 的 


调用 setState 时 , 组 件 的 state 并 不 会 立即 改变 ,setState 只 是 把 要 修改 的 状态 放 入 一 个 队列 中 ， 
React 会 优化 真正 的 执行 时 机 ， 并 且 出 于 性 能 原因 ， 可 能 会 将 多 次 setState 的 状态 修改 合并 成 一 次 
状态 修改 。 所 以 不 要 依赖 当前 的 state， 计算 下 一 个 state。 当 真正 执行 状态 修改 时 ， 依 赖 的 this.state 
并 不 能 保证 是 最 新 的 state， 因 为 React 会 把 多 次 state 的 修改 合并 成 一 次 ， 这 时 this.state 还 是 这 几 
次 state 修改 前 的 state。 另 外 ， 需 要 注意 的 是 ， 同 样 不 能 依赖 当前 的 props 计算 下 一 个 状态 ， 因 为 
props 的 更 新 也 是 异步 的 。 

举 个 例子 , 对 于 一 个 电 商 类 应 用 , 在 购物 车 中 , 点 击 一 次 购买 数量 按钮 ， 购买 的 数量 就 会 加 1， 
如 果 连 续 点 击 两 次 按钮 ， 就 会 连续 调用 两 次 this.setState( {quantity: this.state.quantity + 1})， 在 React 
合并 多 次 修改 为 一 次 的 情况 下 ， 相 当 于 等 价 执行 了 如 下 代码 : 


Object.assign( 
PreviousStatey 
{quantity: this.state.quantity + 1}, 
{quantity: this.state.quantity + 1} 
) 


于 是 ， 后 面 的 操作 覆盖 前 面 的 操作 ， 最 终 购买 的 数量 只 增加 1。 

如 果 有 这 样 的 需求 , 可 以 使 用 另 一 个 接收 一 个 函数 作为 参数 的 setState, 这 个 函数 有 两 个 参数 ， 
第 一 个 是 当前 最 新 状态 (本 次 组 件 状态 修改 生效 后 的 状态 ) 的 前 一 个 状态 preState 本 次 组 件 状态 
修改 前 的 状态 ) ， 第 二 个 参数 是 当前 最 新 的 属性 props。 代 码 如 下 : 
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// 正确 

this.setstate( (preState, props) => ({ 
counter: preState.quantity + 1; 

}3) 


3. state 的 更 新 是 一 个 合并 的 过 程 


当 调 用 setState 修改 组 件 状态 时 ， 只 需要 传 入 发 生 改 变 的 state， 而 不 是 组 件 完整 的 state， 因 为 
组 件 state 的 更 新 是 一 个 合并 的 过 程 。 例 如 ， 一 个 组 件 的 状态 为 : 
this.state = { 
title 3 "React"y 
content : "React is an wonderful JS library!" 


} 
当 只 需要 修改 状态 tile 时 ， 将 修改 后 的 title 传 给 setState 即 可 : 


this.setState({title: 'Reactjs'}); 


React 会 合并 新 的 title 到 原来 的 组 件 状态 中 ， 同 时 保留 原 有 的 状态 content， 合 并 后 的 state 为 : 


{ 
title : 'Reactjs', 
content : 'React is an wonderful JS library!"' 


} 
4.1.3 ”state 与 不 可 变 对 象 


React 官方 建议 把 state 当 作 不 可 变 对 象 , 一 方面 , 直接 修改 this.state, 组 件 并 不 会 重新 render; 
另 一 方面 ，state 中 包含 的 所 有 状态 都 应 该 是 不 可 变 对 象 。 当 state 中 的 某 个 状态 发 生变 化 时 ， 应 该 
重新 创建 这 个 状态 对 象 ， 而 不 是 直接 修改 原来 的 状态 。 那 么 ， 当 状态 发 生变 化 时 ， 如 何 创 建新 的 状 
态 呢 ? 根据 状态 的 类 型 可 以 分 成 以 下 三 种 情况 : 


1. 状态 的 类 型 是 不 可 变 类 型 (数字 、 字 符 串 、 布 尔 值 、null、undefined) 


这 种 情况 最 简单 ， 因 为 状态 是 不 可 变 类 型 ， 所 以 直接 给 要 修改 的 状态 赋 一 个 新 值 即 可 。 例 如 
要 修改 count (数字 类 型 ) 、title (字符 串 类 型 ) 、success (布尔 类 型 ) 三 个 状态 : 


this.setState({ 
count: 1, 
title: 'React', 
success: true 


]) 
2. 状态 的 类 型 是 数组 


例如 有 一 个 数组 类 型 的 状态 books， 当 向 books 中 增加 一 本 书 时 ， 可 使 用 数组 的 concat 方法 或 
ES6 的 数组 扩展 语法 〈spread syntax) : 
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// 方法 一 : 使 用 prestate、concat 创建 新 数组 
this .setState (preState => ({ 
books: PreState.-books .concat (['React Guide']); 


})) 


// 方法 二 : ES6 spread syntax 
this .setState (preState => ({ 

books: [...preState.books, '‘'React Guide']; 
})) 


当 从 books 中 截取 部 分 元 素 作为 新 状态 时 ， 可 使 用 数组 的 slice 方法 : 


this.setState (PreState => ({ 
books: preState.books.slice(1,3); 
7)) 


当 从 books 中 过 滤 部 分 元 素 后 ， 作 为 新 状态 时 ， 可 使 用 数组 的 filter 方法 : 


this.setstate (PreState => ({ 
books: PreState.books .filter(item => { 
return item !== 'React'; 
]) 7 
}) ) 


注意 ， 不 要 使 用 push、pop、shift、unshift、splice 等 方法 修改 数组 类 型 的 状态 ， 因 为 这 些 方法 
都 是 在 原 数 组 的 基础 上 修改 的 ， 而 concat、slice、filter 会 返回 一 个 新 的 数组 。 


3. 状态 的 类 型 是 普通 对 象 不 包含 字符 串 、 数 组 ) 
(1) 使 用 ES6 的 Objectassgin 方法 : 


this .setState (PreState => ({ 
owner: Object.assign({}, preState.owner, {name: 'Jason'}); 
A 


(2) 使 用 对 象 扩展 语法 (object spread properties) : 


this .setState (PreState => ({ 
owner: {...preState.owner, name: 'Jason'}; 


1)) 


总 结 一 下 ， 创 建新 的 状态 对 象 的 关键 是 ， 避 免 使 用 会 直接 修改 原 对 象 的 方法 ， 而 是 使 用 可 以 返 
一 个 新 对 象 的 方法 。 当 然 ， 也 可 以 使 用 一 些 Immutable 的 JS 库 ( 如 Immutablejs〉 实 现 类 似 的 效果 。 

为 什么 React 推荐 组 件 的 状态 是 不 可 变 对 象 呢 ? 一 方面 是 因为 对 不 可 变 对 象 的 修改 会 返回 一 
个 新 对 象 , 不 需要 担心 原 有 对 象 在 不 小 心 的 情况 下 被 修改 导致 的 错误 , 方便 程序 的 管理 和 调试 另 
一 方面 是 出 于 性 能 考虑 ， 当 对 象 组 件 状态 都 是 不 可 变 对 象 时 ， 在 组 件 的 shouldComponentUpdate 方 
法 中 仅 需要 比较 前 后 两 次 状态 对 象 的 引用 就 可 以 判断 状态 是 否 真 的 改变 , 从 而 避免 不 必要 的 render 
调用 。 在 第 5 章 会 详细 介绍 这 部 分 内 容 。 





回 
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4.2 组 件 与 服务 器 通信 


React 关注 的 是 UI 的 分 离 、 视 图 的 组 件 化 ， 对 于 组 件 如 何 与 服务 器 端 API 通信 ，React 官方 并 
没有 给 出 太 多 指导 。 但 是 ， 几 乎 所 有 应 用 都 避免 不 了 和 服务 器 端 API 通信 。 这 就 给 很 多 React 的 使 
用 者 带 来 了 困惑 ，React 中 的 组 件 到 底 应 该 如 何 优雅 地 和 服务 器 通信 呢 ? 本 节 将 结合 实践 对 这 个 问 
题 的 解决 方法 给 出 建议 。 

首先 需要 明确 一 点 ， 本 节 讨 论 的 组 件 与 服务 器 通信 特 指 组 件 从 服务 器 上 获取 数据 ， 不 包含 组 
件 向 服务 器 提交 数据 的 情况 。 组 件 向 服务 器 提交 数据 一 定 是 由 组 件 UI 的 某 一 事件 触发 的 ， 比 如 提 
交 了 一 个 表单 、 点 击 了 一 个 元 素 等 , 所 以 只 要 在 监听 相应 事件 的 回调 函数 中 执行 向 服务 器 提交 数据 
的 逻辑 即 可 ， 一 般 不 会 有 疑问 。 但 组 件 从 服务 器 上 获取 数据 ， 情 况 就 要 复杂 得 多 。 


4.2.1 组 件 挂 载 阶段 通信 


React 组 件 的 正常 运转 本 质 上 是 组 件 不 同 生命 周期 方法 的 有 序 执行 ， 因此 组 件 与 服务 器 的 通信 
也 必定 依赖 组 件 的 生命 周期 方法 。 我 们 先 来 看 一 下 组 件 在 挂 载 阶段 如 何 与 服务 器 通信 。 
定义 一 个 UserListContainer 组 件 ， 需 要 从 服务 器 获取 用 户 列 表 : 


class UserListContainer extends React.Component{ 
/** 省 略 无 关 代 码 **/ 


componentDidMount() { 
var that = this; 
fetch('/path/to/user-api') .then (function (response) { 
response.json() .then (function(data) 1{ 
that .setState ({users: data}) 


UserListContainer 是 在 componentDidMount 中 与 服务 器 进行 通信 的 , 这 时 候 组 件 已 经 挂 载 , 真 
实 DOM 也 已 经 演 染 完成 ， 是 调用 服务 器 API 最 安全 的 地 方 ， 也 是 React 官方 推荐 的 进行 服务 器 通 
信 的 地 方 。 

除了 componentDidMount 外 ， 在 componentWillMount 中 进行 服务 器 通信 也 是 比较 常见 的 一 种 
方式 。 代 码 如 下 : 


class UserListContainer extends React.Component{ 


/** 省 略 无 关 代码 **/ 
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componentWillMount() { 
var that = this; 
fetch('/path/to/user-api') .then(function (response) { 
response.json() .then(function(data) { 
that .setState ({users: data}) 
Ds; 
Ds 
} 
} 


componentWillMount 会 在 组 件 被 挂 载 前 调用 ， 因 此 从 时 间 上 来 讲 ， 在 componentWilMount 中 
执行 服务 器 通信 要 早 于 在 componentDidMount 中 执行 ， 执 行 得 越 早 意味 着 服务 器 数据 越 能 更 快 地 
返回 组 件 。 这 也 是 很 多 人 青睐 在 componentWillMount 中 执行 服务 器 通信 的 重要 原因 。 但 实际 上 ， 
componentWillMount 与 componentDidMount 执行 的 时 间 差 微乎其微 ， 完 全 可 以 忽略 不 计 。 

componentDidMount 是 执行 组 件 与 服务 器 通信 的 最 佳 地 方 ， 原 因 主 要 有 两 个 : 


(1) 在 componentDidMount 中 执行 服务 器 通信 可 以 保证 获取 到 数据 时 ， 组 件 已 经 处 于 挂 载 状 
态 ， 这 时 即使 要 直接 操作 DOM 也 是 安全 的 ， 而 componentWillMount 无 法 保证 这 一 点 。 

(2) 当 组 件 在 服务 器 端 泻 染 时 《〈 本 书 不 涉及 服务 器 泻 染 内 容 ) ，componentWillMount 会 被 调 
用 两 次 ， 一 次 是 在 服务 器 端 ， 另 一 次 是 在 浏览 器 端 ， 而 componentDidMount 能 保证 在 任何 情况 下 
只 会 被 调用 一 次 ， 从 而 不 会 发 送 多 余 的 数据 请 求 。 


有 些 开发 人 员 会 在 组 件 的 构造 函数 中 执行 服务 器 通信 ， 一 般 情 况 下 ， 这 种 方式 也 可 以 正常 工 
作 。 但 是 ， 构 造 函数 的 意义 是 执行 组 件 的 初始 化 工作 ， 如 设置 组 件 的 初始 状态 ， 并 不 适合 做 数据 请 
求 这 类 有 “副作用 ”的 工作 。 因 此 ， 不 推荐 在 构造 函数 中 执行 服务 器 通信 。 


4.2.2 ”组件 更 新 阶段 通信 


组 件 在 更 新 阶段 常常 需要 再 次 与 服务 器 通信 ， 获 取 服 务 器 上 的 最 新 数据 。 例 如 ， 组 件 需要 以 props 
中 的 某 个 属性 作为 与 服务 器 通信 时 的 请 求 参数 ， 当 这 个 属性 值 发 生 更 新 时 ， 组 件 自然 需要 重新 与 服务 
器 通信 。 回 想 2.3 节 中 对 组 件 生命 周期 的 介绍 ， 不 难 发 现 componentWillReceiveProps 非常 适合 做 这 个 
工作 。 假 设 UserListContainer 在 获取 用 户 列表 时 还 需要 一 个 参数 category， 用 来 根据 用 户 的 职业 做 
筛选 ，category 这 个 参数 是 从 props 中 获取 的 ， 实 现代 码 如 下 : 


class UserListContainer extends React.Component{ 





/** 省 略 无 关 代 码 **/ 


componentWillReceiveProps (nextProps) { 
if (nextProps.category !== this.props.category) { 
fetch('/path/to/user-api?category='+ nextProps.category). 
then (function(response) { 


response.json() .then(function(data) { 
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that -setState ({users: data}) 


这 里 还 有 一 个 地 方 要 注意 ， 在 执行 fetch 请 求 时 ， 要 先 对 新 老 props 中 的 category 做 比较 ， 只 
有 不 一 致 才 说 明 category 有 了 更 新 , 才 需 要 重新 进行 服务 器 通信 。componentWillReceiveProps 的 执 
行 并 不 能 保证 props 一 定 发 生 了 修改 。 





4.3 ”组件 通信 


一 个 React 应 用 是 由 许多 个 组 件 像 搭 积木 一 样 搭建 而 成 的 , 只 要 应 用 不 是 完全 由 展示 组 件 组 成 
的 , 组 件 之 间 就 难免 需要 进行 通信 。 其 实 , 前 面 一 些 内 容 已 经 涉及 组 件 的 通信 ， 只 是 我 们 并 没有 刻 
意 强 调 这 个 概念 。 下 面 系统 地 介绍 组 件 是 如 何 进行 通信 的 。 


4.3.1 ”父子 组 件 通 信 


父子 组 件 通信 是 最 常见 的 通信 形式 , 例如 4.2 节 的 UserListContainer 组 件 获取 到 的 用 户 数据 需要 
通过 UserList 组 件 展示 ， 这 时 UserListContainer 和 UserList 就 存在 父子 组 件 通信 。UserListContainer 
作为 父 组件 ， 将 获取 到 的 用 户 信息 通过 子 组 件 UserList 的 props 传递 给 UserList。 所 以 父 组 件 向 子 组 
件 通信 是 通过 父 组 件 向 子 组 件 的 props 传递 数据 完成 的 。 代 码 如 下 : 


class UserList extends React.Component{ 


render() { 
return ( 
<div> 
<ul className="user-list"> 
{this.props.users.map(function(user) { 
return ( 
<1i key={user.id}> 
<span>{user.name}</span> 
</1i> 
); 
1)} 
</ul> 
</div> 
) 
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import UserList from './UserList' 
class UserListContainer extends React.Component{ 


constructor (props){ 
super (props); 
this.state = { 


users: [] 


componentDidMount () { 
var that = this; 
fetch('/path/to/user-api') .then (function(response) { 
response.json() .then (function(data) { 
that .setState ({users: data}) 
Dk 
DD); 


render() { 
return ( 
{/* 通过 props 传递 users */} 


<UserList users={this.state.users} /> 


} 


当 子 组 件 需 要 向 父 组 件 通信 时 ， 又 该 怎么 做 呢 ? 答案 依然 是 props。 父 组 件 可 以 通过 子 组 件 的 
props 传递 给 子 组 件 一 个 回调 函数 ， 子 组 件 在 需要 改变 父 组 件数 据 时 ， 调 用 这 个 回调 函数 即 可 。 下 
面 为 UserList 再 增加 一 个 添加 新 用 户 的 功能 : 


class UserList extends React.Component{ 


constructor (props){ 
super (props); 
this.state = { 
newUser : '" 
}; 
this.handleChange = this.handleChange.bind(this); 
this.handleClick 


this.handleClick.bind (this); 
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handleChange (e) { 
this.setState ({newUser: e.target.value}); 
} 
// 通过 props 调用 父 组 件 的 方法 新 增 用 户 
handleClick() { 
if(this.state.newUser && this.state.newUser.length > 0) { 
this.props.onAddUser (this.state.newUser); 


} 


render() { 
return ( 
<div> 
<ul className="user-list"> 
{this.props.users.map(function(user) { 
return ( 
<li key={user.id}> 
<span>{user.name}</span> 
</1i> 
); 
1D)} 
</ul> 
<input onChange={this.handleChange} value={this.state.newUser} /> 
<button onClick={this.handleClick}> 新 增 </button> 
</div> 


} 


在 input 内 输入 新 用 户 的 名 称 ， 然 后 点 击 新 增 按钮 ， 调 用 handleClick 方法 ， 在 handleClick 内 
部 ， 调 用 通过 props 传递 过 来 的 onAddUser 执行 保存 用 户 的 逻辑 。 下 面 来 看 一 下 onAddUser 在 
UserListContainer 中 的 实现 : 


import UserList from './UserList' 
class UserListContainer extends React.Component{ 


constructor (props){ 
super (props); 
this.state = { 
users: [] 
} 
this.handleAddUser = this.handleAddUser.bind (this); 
. 


componentDidMount () { 
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var that = this; 
fetch('/path/to/user-api') .then(function (response) { 
response.json() .then(function(data) { 
that -setState ({fusers: data}) 
Ds; 
Ds 
// 新 增 用 户 
handleAddUser (user) { 
Var that = this; 
fetch('/path/to/save-user-api',{ 
method: 'POST', 
body: JSON.stringify({'username' :user}) 
}) .then (function (response) { 
response.json() .then (function (newUser) { 
// 将 服务 器 端 返回 的 新 用 户 添加 到 state 中 
that .setState ( (PreState) => ({users: preState.users.concat 
([newUser])})) 
1); 
]) 7 
} 


render() { 
return ( 
{/* 通过 props 传递 users 和 handleaddUser 方法 */} 
<UserList users={this.state.users} 
onAddUser={this.handleAddUser} 
zx 
) 
} 
} 


子 组 件 UserList 通过 调用 props.onAddUser 方法 成 功 地 将 待 新 增 的 用 户 传递 给 父 组 件 
UserListContainer 的 handleAddUser 方法 执行 保存 操作 ， 保 存 成 功 后 ，UserListContainer 会 更 新 状 
态 users， 从 而 又 将 最 新 的 用 户 列表 传递 给 UserList。 这 一 过 程 既 包含 子 组 件 到 父 组 件 的 通信 ， 又 包 
含 父 组 件 到 子 组 件 的 通信 ， 而 通信 的 桥梁 就 是 通过 props 传递 的 数据 和 回调 方法 。 


4.3.2 ”兄弟 组 件 通信 


当 两 个 组 件 不 是 父子 关系 但 有 相同 的 父 组 件 时 ， 称 为 兄弟 组 件 。 注 意 ， 这 里 的 兄弟 组 件 在 整 
个 组 件 树 上 并 不 一 定 处 于 同一 层级 ， 如 图 4-1 所 示 的 两 种 情况 , B 和 C 都 是 兄弟 组 件 ， 因 为 他 们 都 
有 相同 的 父 组 件 A。 
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图 4-1 


兄弟 组 件 不 能 直接 相互 传送 数据 ， 需 要 通过 状态 提升 的 方式 实现 兄弟 组 件 的 通信 ， 即 把 组 件 
之 间 需 要 共享 的 状态 保存 到 距离 它们 最 近 的 共同 父 组 件 内 , 任意 一 个 兄弟 组 件 都 可 以 通过 父 组 件 传 
递 的 回调 函数 来 修改 共享 状态 , 父 组 件 中 共享 状态 的 变化 也 会 通过 props 向 下 传递 给 所 有 兄弟 组 件 ， 
从 而 完成 兄弟 组 件 之 间 的 通信 。 

我 们 在 UserListContainer 中 新 增 一 个 子 组 件 UserDetail， 用 于 显示 当前 选中 用 户 的 详细 信息 ， 
比如 用 户 的 年 龄 、 联 系 方式 、 家 庭 地 址 等 。 这 时 ，UserList 和 UserDetail 就 成 了 兄弟 组 件 ， 
UserListContainer 是 它们 的 共同 父 组件 。 当 用 户 在 UserList 中 点 击 一 条 用 户 信息 时 ，UserDetail 需 
要 同步 显示 该 用 户 的 详细 信息 , 因此, 可 以 把 当前 选中 的 用 户 currentUser 保存 到 UserListContainer 
的 状态 中 。 

先 来 修改 UserList 组 件 : 


class UserList extends React.Component{ 





constructor (props){ 
super (props); 
this.state = { 
newUser : '' 
}; 
this.handleChange = this.handleChange.bind(this); 
this.handleClick = this.handleClick.bind (this); 
} 


handleChange (e) { 
this .setState ({newUser: e.target.value}); 
} 
// 通过 props 调用 父 组 件 的 方法 新 增 用 户 
handleClick() { 
if(this.state.newUser && this.state.newUser.length > 0) { 
this.props.onAddUser (this.state.newUser); 
和 
} 
// 通过 props 调用 父 组 件 的 方法 ， 设 置 当前 选中 的 用 户 
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handleUserClick(userId) { 
this.props.onSetCurrentUser (userId); 


} 


render() { 
return ( 
<div> 
<ul className="user-list"> 
{this.props.users.map((user) => { 
return ( 
<li key={user.id} 
{/* 使 用 不 同样 式 显示 当前 用 户 */} 
className={ (this.props.currentUserId === user.id) ? 'current' : ''} 
onClick={this.handleUserClick.bind(this, user.id)}> 
<span>{user.name}</span> 
</li> 
); 
3 
</ul> 
<input onChange={this.handleChange} value={this.state.newUser} /> 
<button onClick={this.handleClick}> 新 增 </button> 
</div> 


} 


我 们 为 UserList 添加 了 处 理 点 击 用 户 项 的 回调 函数 handleUserClick， 还 为 当前 处 于 选中 状态 
的 用 户 项 添加 了 名 为 current 的 样式 。 
再 来 创建 UserDetail 组 件 : 


function UserDetail(props) { 
return ( 
<div> 
{props.currentUser ? 

(<div> 用 户 姓 名 : {props.currentUser.name}</div> 
<div> 用 户 年 龄 : {props.currentUser.age}</div> 
<div> 用 户 联 系 方式 : {props.currentUser.phone}</div> 
<div> 家 庭 地 址 : {props.currentUser.address}</div>) 
i 

+ 
</div> 
) 
} 


UserDetail 不 需要 维护 自己 的 状态 ， 因 此 最 适合 用 函数 组 件 来 实现 。 
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最 后 修改 UserListContainer 组 件 


import UserList from './UserList' 


import UserDetail from './UserDetail' 
class UserListContainer extends React.Component{ 


constructor (props){ 
super (props); 
this.state = { 
userss [ls 
currentUserId: null 
} 
this.handleAddUser = this.handleAddUser.bind (this); 
this.handleSetCurrentUser = this.handleSsetCurrentUser.bind (this); 


componentDidMount () { 
var that = this; 
fetch('/path/to/user-api') .then (function (response) { 
response.json() .then (function(data) { 
that .setState ({users: data}) 
ys 


// 新 增 用 户 
handleAddUser (user) { 
var that = this; 
fetch('/path/to/save-user-api',{ 
method: 'POST', 
body: JSON.stringify({'username':user}) 
}) .then (function (response) { 
response.json() .then (function (newUser) { 
that .setState ( (PreState) => ({users: preState.users.concat 


([newUser])})) 


用 
]) 7 
} 
// 设置 当前 选中 的 用 户 
handleSetCurrentUser (userId) { 
this.setState({ 
currentUserId : userId 


]) 
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render() { 
// 根据 currentUserId， 和 筛选 出 当前 用 户 对 象 
const filterUsers = this.state.users.filter((user) => {user.id === 
this.state.currentUserId}); 
Const currentUser = filterUsers.length > 0 ? filterUsers[0] : null; 
return ( 
<UserList users={this.state.users} 
currentUserId = {this.state.currentUserId} 
onAddUser = {this.handleAddUser} 
onSetCurrentUser = {this.handleSetCurrentUser} 
/> 


<UserDetail currentUser = {currentUser} /> 


} 


UserListContainer 新 增 状 态 currentUserId 用 来 标识 当前 选中 的 用 户 , 这 个 状态 正 是 UserList 和 
UserDetail 两 个 组 件 都 要 用 到 的 状态 , 通过 状态 提升 保存 到 它们 共同 的 父 组 件 UserListContainer 中 。 
同时 ，UserListContainer 通过 UserList 的 props 将 修改 currentUserId 的 回调 函数 传递 给 UserList， 
使 UserList 可 以 在 自身 内 部 修改 currentUserId。 


4.3.3 Context 


当 组 件 所 处 层级 太 深 时 , 往往 需要 经 过 很 多 层 的 props 传递 才能 将 所 需 的 数据 或 者 回调 函数 传 
递 给 使 用 组 件 。 这 时 ， 以 props 作为 桥梁 的 组 件 通信 方式 便 会 显得 很 烦琐 。 例如， 我 们 把 UserList 
中 新 增 用 户 的 工作 单独 拆 分 到 一 个 新 的 组 件 UserAdd 中 : 


class UserAdd extends React.Component{ 


constructor (props){ 
super (props); 
this.state = { 
newUser :; '"' 
bs; 
this.handleChange = this.handleChange.bind (this); 
this.handleClick = this.handleClick.bind (this); 
} 


handleChange (e) { 
this.setState ({newUser: e.target.value}); 
} 
// 通过 props 调用 父 组 件 的 方法 新 增 用 户 
handleClick() { 
if(this.state.newUser && this.state.newUser.length > 0) { 


this.props.onAddUser (this.state.newUser); 
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} 


render() { 
return ( 
<div> 
<input onChange={this.handleChange} value={this.state.newUser} /> 
<button onclick={this.handlecClick}> 新 增 </button> 


</div> 


} 
同时 ， 修 改 原 有 的 UserList 组 件 : 


import UserAdd from './UserAdd' 


class UserList extends React.Component{ 
// 通过 props 调用 父 组 件 的 方法 ， 设 置 当 前 用 户 
handleUserClick(userId) { 


this.props.onSetCurrentUser (userId); 


} 


render() { 
return ( 
<div> 
<ul className="user-list"> 
{this.props.users.map((user) => { 
return ( 
<1i key={user.id} 
className={ (this.props.currentUserId === user.id) ? 'current' : ''} 
onClick={this.handleUserClick.bind(this, user.id)}> 
<span>{user.name}</span> 
</1i> 
); 
]}) } 
</ul> 
{/* 传递 UserListcontainer 的 handleAdqdUser 方法 */} 
<UserAdd onAddUser = {this.props.onAddUser} /> 


</div> 


} 


可 以 发 现 ，UserListContainer 中 处 理 添加 用 户 的 函数 handleAddUser 经 过 UserList 和 UserAdd 
两 个 层级 的 props 传递 才 到 达 UserAdd 组 件 中 。 当 应 用 更 加 复杂 时 ， 组 件 的 层级 会 更 多 ， 组 件 通信 
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就 需要 经 过 更 多 层级 的 传递 ， 组 件 通信 会 变 得 非常 麻烦 。 幸 好 ，React 提供 了 一 个 context 上 下 文 ， 
让 任意 层级 的 子 组 件 都 可 以 获取 父 组 件 中 的 状态 和 方法 。 创 建 context 的 方式 是 : 在 提供 context 
的 组 件 内 新 增 一 个 getChildContext 方法 ， 返 回 context 对 象 ， 然 后 在 组 件 的 childContextTypes 属性 
上 定义 context 对 象 的 属性 的 类 型 信息 。UserListContainer 是 提供 context 的 组 件 ， 改 写 如 下 : 


class UserListContainer extends React.Component{ 


/xx 省 略 其 余 代码 **/ 


// 创建 context 对 象 ， 包 含 onaddUser 方法 
getChildCcontext() { 
return {onAddUser: this.handleAddUser}; 


} 
// 新 增 用 户 
handleAddUser (user) { 
this.setState((preState) => ({users: preState.users.concat ([{'id':'c', 


"name': "cc' }])})) 


} 


render() { 
const filterUsers = this.state.users.filter((user) => {user.id = 


this.state.currentUserId}); 
const currentUser = filterUsers.length > 0 ? filterUsers[0] : null; 


return ( 
<UserList users={this.state.users} 
currentUserId = {this.state.currentUserId} 
onSetCurrentUser = {this.handleSetCurrentUser} 
/> 


<UserDetail currentUser = {currentUser} /> 


// 声明 context 的 属性 的 类 型 信息 
UserListContainer.childContextTypes = { 
onAddUser: PropTypes.func 
}; 
UserListContainer 通过 增加 getChildContext 和 childContextTypes 将 onAddUser 在 组 件 树 中 自 
动向 下 传递 ， 当 任意 层级 的 子 组 件 需 要 使 用 时 ， 只 需要 在 该 组 件 的 contextTypes 中 声明 使 用 的 
context 属性 即 可 。 例 如 ，UserAdd 需要 使 用 context 中 的 onAddUser， 代 码 如 下 : 


class UserAdd extends React.Component{ 
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/x+ 省略 其 余 代码 **/ 


handlechange (e) { 
this.setstate({newUser: e.target.value}); 


} 


handleClick() { 
if(this.state.newUser && this.state.newUser.length > 0) { 
this.context.onAddUser (this.state.newUser); 
} 
} 


render() { 
return ( 
<div> 
<input onChange={this.handleChange} value={this.state.newUser} /> 
<button onClick={this.handleClick}>Add</button> 
</div> 
) 
} 
} 


// 声明 要 使 用 的 context 对 象 的 属性 
UserAdd.contextTypes = { 
onAddUser: PropTypes.func 

}; 

增加 contextTypes 后 ， 在 UserAdd 内 部 就 可 以 通过 this.context.onAddUser 的 方式 访问 context 
中 的 onAddUser 方 法 ,注意 ,这 里 的 示例 传递 的 是 组 件 的 方法 ,组 件 中 的 任意 数据 也 可 以 通过 context 
自动 向 下 传递 。 另外 ， 当 context 中 包含 数据 时 , 如 果 要 修改 context 中 的 数据 , 一 定 不 能 直接 修改 ， 
而 是 要 通过 setState 修改 ， 组 件 state 的 变化 会 创建 一 个 新 的 context， 然 后 重新 传递 给 子 组 件 。 

虽然 context 给 组 件 通信 带 来 了 便利 , 但 过 多 使 用 context 会 让 应 用 中 的 数据 流 变 得 混乱 , 而 且 
context 是 一 个 实验 性 的 API, 在 未 来 的 React 版 本 中 是 可 能 被 修改 或 者 废弃 的 。 所 以 ， 使 用 context 
一 定 要 慎重 。 


4.3.4 延伸 


前 面 介绍 的 三 种 组 件 通信 方式 都 是 依赖 React 组 件 自身 的 语法 特性 。 其 实 , 还 有 更 多 的 方式 可 
以 来 实现 组 件 通信 。 我 们 可 以 使 用 消息 队列 来 实现 组 件 通信 : 改变 数据 的 组 件 发 起 一 个 消息 , 使 用 
数据 的 组 件 监听 这 个 消息 ， 并 在 响应 函数 中 触发 setState 来 改变 组 件 状 态 。 本 质 上 ， 这 是 观察 者 模 
式 的 实现 ， 我 们 可 以 通过 引入 EventEmitter 或 Postaljs 等 消息 队列 库 完成 这 一 过 程 。 当 应 用 更 加 复 
杂 时 ， 还 可 以 引入 专门 的 状态 管理 库 实现 组 件 通 信和 组 件 状态 的 管理 ， 例 如 Redux 和 MobX 是 当 
前 非常 受 欢 迎 的 两 种 状态 管理 库 。 后 面 的 章节 中 会 对 这 两 种 状态 解决 方案 做 详细 介绍 。 
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4.4 ”特殊 的 ref 


在 2.6.2 节 非 受 控 组 件 中 ， 已 经 使 用 过 ref 来 获取 表单 元 素 。ref 不 仅 可 以 用 来 获取 表单 元 素 ， 
还 可 以 用 来 获取 其 他 任意 DOM 元 素 ， 甚 至 可 以 用 来 获取 React 组 件 实例 。 在 一 些 场景 下 , ref 的 使 
用 可 以 带 来 便利 , 例如 控制 元 素 的 焦点 、 文 本 的 选择 或 者 和 第 三 方 操作 DOM 的 库 集成 。 但 绝 大 多 
数 场景 下 ， 应 该 避免 使 用 ref， 因 为 它 破坏 了 React 中 以 props 为 数据 传递 介质 的 典型 数据 流 。 本 节 
将 介绍 ref 常用 的 使 用 场景 。 


4.4.1 在 DOM 元 素 上 使 用 ref 


在 DOM 元 素 上 使 用 ref 是 最 常见 的 使 用 场景 。ref 接收 一 个 回调 函数 作为 值 , 在 组 件 被 挂 载 或 
卸载 时 ， 回 调 函数 会 被 调用 ， 在 组 件 被 挂 载 时 ， 回 调 函 数 会 接收 当前 DOM 元 素 作为 参数 ; 在 组 件 
被 卸载 时 ， 回 调 函数 会 接收 null 作为 参数 。 例 如 : 


class AutoFocusTextInput extends React.Component { 
componentDidMount () { 
// 通过 ref 让 input 自动 获取 焦点 
this.textInput.focus(); 
} 


render() { 
return ( 
<div> 
<input 
type="text" 
ref={ (input) => { this.textInput = input; }} /> 
</div> 
); 
t 
} 


AutoFocusTextInput 中 为 input 元 素 定义 ref, 在 组 件 挂 载 后 , 通过 ref 获取 该 input 元 素 , 让 input 
自动 获取 焦点 。 如 果 不 使 用 ref， 就 难以 实现 这 个 功能 。 
4.4.2 在 组 件 上 使 用 ref 


React 组 件 也 可 以 定义 ref， 此 时 ref 的 回调 函数 接收 的 参数 是 当前 组 件 的 实例 ， 这 提供 了 一 种 
在 组 件 外 部 操作 组 件 的 方式 。 例 如 ， 在 使 用 AutoFocusTextInput 组 件 的 外 部 组 件 Container 中 控制 
AutoFocusTextInput: 


class AutoFocusTextInput extends React.Component { 


constructor(props) { 
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super (props); 
this.blur = this.blur.bind(this); 


componentDidMount() { 
// 通过 ref 让 input 自动 获取 焦点 
this.textInput.focus(); 

} 

// 让 input 失去 焦点 

blur() { 
this.textInput.blur(); 


render() { 
return ( 
<div> 
<input 
type="text" 
ref={ (input) => { this.textInput = input; }} /> 
</div> 
); 


class Container extends React.Component { 
constructor(props) { 
super (props); 
this.handleClick = this.handleClick.bind(this); 


handleClick() { 
// 通过 ref 调用 AutoFocusTextInput 组 件 的 方法 


this.inputInstance.blur() 7 


render() { 
return ( 
<div> 
<AutoFocusTextInput ref={ (input) => {this.inputIinstance = input}}/> 
<button onClick={this.handleClick}> 失 去 焦点 </button> 
</div> 


hs 
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在 Container 组 件 中 , 我 们 通过 ref 获取 到 了 AutoFocusTextInput 组 件 的 实例 对 象 , 并 把 它 赋 值 
给 Container 的 inputInstance 属性 , 这 样 就 可 以 通过 inputInstance 调用 AutoFocusTextInput 中 的 blur 
方法 ， 让 已 经 处 于 获取 焦点 状态 的 input 元 素 失 去 焦点 。 

注意 ， 只 能 为 类 组 件 定义 ref 属性 ， 而 不 能 为 函数 组 件 定义 ref 属性 ， 例 如 下 面 的 写法 是 不 起 
作用 的 : 


function MyFunctionalComponent() { 
return <input />; 


} 


class Parent extends React.Component { 
render() { 
// ref 不 生效 
return ( 
<MyFunctionalComponent 
ref={ (input) => { this.textInput = input; }} /> 
); 
} 
} 


函数 组 件 虽然 不 能 定义 ref 属性 ， 但 这 并 不 影响 在 函数 组 件 内 部 使 用 ref 来 引用 其 他 DOM 元 
素 或 组 件 ， 例 如 下 面 的 例子 是 可 以 正常 工作 的 : 


function MyFunctionalComponent() { 


let textInput = null; 


function handleClick() { 
textInput.focus(); 


} 


return ( 
<div> 
<input 
type="text" 
ref={ (input) => { textInput = input; }} /> 
<button onClick={handleClick}> 获 取 焦 点 </button> 
</div> 
) 
} 


4.4.3 ” 父 组 件 访问 子 组 件 的 DOM 节点 


在 一 些 场景 下 , 我 们 可 能 需要 在 父 组 件 中 获取 子 组 件 的 某 个 DOM 元 素 , 例如 父 组 件 需 要 知道 
这 个 DOM 元 素 的 尺寸 或 位 置信 息 ， 这 时 候 直接 使 用 ref 是 无 法 实现 的 ， 因 为 ref 只 能 获取 子 组 件 
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的 实例 对 象 ， 而 不 能 获取 子 组 件 中 的 某 个 DOM 元 素 。 不 过 , 我 们 可 以 采用 一 种 间接 的 方式 获取 子 
组 件 的 DOM 元 素 : 在 子 组 件 的 DOM 元 素 上 定义 ref，ref 的 值 是 父 组 件 传递 给 子 组 件 的 一 个 回调 
函数 ， 回 调 函数 可 以 通过 一 个 自 定 义 的 属性 传递 ， 例 如 inputRef， 这 样 父 组 件 的 回调 函数 中 就 能 获取 
到 这 个 DOM 元 素 。 下 面 的 例子 中 ， 父 组 件 Parent 的 inputElement 指向 的 就 是 子 组 件 的 input 元 素 。 


function Children (Props) { 
// 子 组 件 使 用 父 组 件 传递 的 inputRef， 为 input 的 ref 赋值 
return ( 
<div> 
<input ref={props.inputRef} /> 
</div> 
); 
} 


class Parent extends React.Component { 


render() { 
// 自 定义 一 个 属性 inputRef， 值 是 一 个 函数 
return ( 


<Children 
inputRef={el => this.inputElement = el} 


从 这 个 例子 中 还 可 以 发 现 ， 即 使 子 组 件 是 函数 组 件 ， 这 种 方式 同样 有 效 。 
4.5 本 章 小 结 


本 章 再 次 讨论 React 组 件 。 首 先 ， 我 们 详细 介绍 了 组 件 state， 包 括 state 的 设计 、state 的 修改 
以 及 state 和 不 可 变 对 象 之 间 的 关系 ; 接着， 我们 介绍 了 组 件 与 服务 器 通信 ， 这 是 初学 者 常常 产生 
困惑 的 地 方 , 关键 是 要 清楚 应 该 在 组 件 的 哪些 生命 周期 方法 中 进行 服务 器 请 求 , 组 件 之 间 的 通信 桥 
梁 是 props， 要 注意 父子 组 件 通信 时 状态 提升 的 情况 ，context 虽然 能 简化 组 件 的 通信 ， 但 它 破坏 了 
React 组 件 的 数据 流 ， 使 用 时 要 慎重 ， 最后， 我 们 介绍 了 ref 的 3 种 常见 的 使 用 场景 ，ref 也 需要 避 
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虚拟 DOM 和 性 能 优化 


React 之 所 以 执行 效率 高 , 一 个 很 重要 的 原因 是 它 的 虚拟 DOM 机 制 。 React 应 用 常用 的 性 能 优 
化 方法 也 大 都 与 虚拟 DOM 机 制 相关 。 本 章 将 先 介绍 虚拟 DOM 的 概念 和 用 于 虚拟 DOM 结构 比较 
的 Diff 算 法， 然后 介绍 React 常用 的 性 能 优化 方法 和 性 能 检测 工具 。 


5.1 虚拟 DOM 


虚拟 DOM 是 和 真实 DOM 相对 应 的 ， 真 实 DOM 也 就 是 平时 我 们 所 说 的 DOM， 它 是 对 结构 
化 文本 的 抽象 表达 。 在 Web 环境 中 ， 其 实 就 是 对 HTML 文本 的 一 种 抽象 描述 ， 每 一 个 HTML 元 
素 对 应 一 个 DOM 节点 , HTML 元 素 的 层级 关系 也 会 体现 在 DOM 节点 的 层级 上 , 所 有 的 这 些 DOM 
节点 构成 一 棵 DOM 树 。 

在 传统 的 前 端 开发 中 ， 通 过 调用 浏览 器 提供 的 一 组 API 直接 对 DOM 执行 增删 改 查 的 操作 。 
例如 ， 通 过 getElementById 查询 一 个 DOM 节点 ， 通 过 insertBefore 在 某 个 节点 前 插入 一 个 新 的 节 
点 等 。 这 些 操作 看 似 只 执行 了 一 条 JavaScript 语法 , 但 它们 的 执行 效率 要 比 执行 一 条 普通 JavaScript 
语句 慢 得 多 ， 尤 其 是 对 DOM 进行 增删 改 操作 ， 每 一 次 对 DOM 的 修改 都 会 引起 浏览 器 对 网 页 的 重 
新 布局 和 重新 泻 染 ， 而 这 个 过 程 是 很 耗 时 的 。 这 也 是 为 什么 前 端 性 能 优化 中 有 一 条 原则 : 尽量 减少 
DOM 操作 。 

既然 操作 DOM 效率 低下 , 那么 有 什么 办 法 可 以 解决 这 个 问题 呢 ? 在 软件 开发 中 , 有 这 么 一 句 
话 : 软件 开发 中 遇 到 的 所 有 问题 都 可 以 通过 增加 一 层 抽象 而 得 以 解决 。DOM 效率 低下 的 这 个 问题 
同样 可 以 通过 增加 一 层 抽象 解决 。 虚拟 DOM 就 是 这 层 抽象 , 建立 在 真实 DOM 之 上 , 对 真实 DOM 
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的 抽象 。 这 里 需要 注意 ， 虚 拟 DOM 并 非 React 所 独 有 的 ， 它 是 一 个 独立 的 技术 ， 只 不 过 React 使 
用 了 这 项 技术 来 提高 自身 性 能 。 

虚拟 DOM 使 用 普通 的 JavaScript 对 象 来 描述 DOM 元 素 ， 对 象 的 结构 和 2.1 节 中 
React.createElement 方法 使 用 的 参数 的 结构 类 似 , 实际 上 , React 元 素 本 身 就 是 一 个 虚拟 DOM 节点 。 
例如 ， 下 面 是 一 个 DOM 结构 : 


<div className="foo"> 
<hl>Hello React</hl> 


</div> 
可 以 用 这 样 的 一 个 JavaScript 对 象 来 表述 : 


{ 
type: "div'v 
props* { 
className: 'foo', 
children: { 
type: 'hl', 
props:{ 
children: 'Hello React' 
} 
} 
} 
} 


有 了 虚拟 DOM 这 一 层 , 当 我 们 需要 操作 DOM 时 ,就 可 以 操作 虚拟 DOM ,而 不 操作 真实 DOM， 
虚拟 DOM 是 普通 的 JavaScript 对 象 , 访问 JavaScript 对 象 当然 比 访问 真实 DOM 要 快 得 多 。 到 这 里 ， 
大 家 可 以 发 现 ， 虚 拟 DOM 并 不 是 什么 神奇 的 东西 ， 它 只 是 用 来 描述 真实 DOM 的 JavaScript 对 象 
而 已 。 


5.2 Di 算法 


React 采用 声明 式 的 API 描述 UI 结构 ， 每 次 组 件 的 状态 或 属性 更 新 ， 组 件 的 render 方法 都 会 
返回 一 个 新 的 虚拟 DOM 对 象 , 用 来 表述 新 的 UI 结构 。 如 果 每 次 render 都 直接 使 用 新 的 虚拟 DOM 
来 生成 真实 DOM 结构 ， 那 么 会 带 来 大 量 对 真实 DOM 的 操作 ， 影 响 程序 执行 效率 。 事 实 上 ，React 
会 通过 比较 两 次 虚拟 DOM 结构 的 变化 找 出 差异 部 分 ， 更 新 到 真实 DOM 上 ， 从 而 减少 最 终 要 在 真 
实 DOM 上 执行 的 操作 ， 提 高 程序 执行 效率 。 这 一 过 程 就 是 React 的 调和 过 程 (Reconciliation) ， 
其 中 的 关键 是 比较 两 个 树 形 结构 的 Diff 算法 。 





在 Diff 算 法 中 ,比较 的 两 方 是 新 的 虚拟 DOM 和 旧 的 虚拟 DOM, 而 不 是 虚拟 DOM 和 
注意 真实 DOM， 只 不 过 Dif 的 结果 会 更 新 到 真实 DOM 上 。 
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正常 情况 下 ， 比 较 两 个 树 形 结构 差异 的 算法 的 时 间 复 杂 度 是 O(N^3)， 这 个 效率 显然 是 无 法 接 
受 的 。React 通过 总 结 DOM 的 实际 使 用 场景 提出 了 两 个 在 绝 大 多 数 实践 场景 下 都 成 立 的 假设 ， 基 
于 这 两 个 假设 ，React 实现 了 在 OOD) 时间 复杂 度 内 完成 两 棵 虚拟 DOM 树 的 比较 。 这 两 个 假设 是 : 


(1) 如 果 两 个 元 素 的 类 型 不 同 ， 那 么 它们 将 生成 两 棵 不 同 的 树 。 
(2) 为 列表 中 的 元 素 设置 key 属性 ， 用 key 标识 对 应 的 元 素 在 多 次 render 过 程 中 是 否 发 生 
变化 。 


下 面 介绍 在 不 同情 况 下 ，React 具体 是 如 何 比较 两 棵 树 的 差异 的 。React 比较 两 棵 树 是 从 树 的 
根 节点 开始 比较 的 ， 根 节点 的 类 型 不 同 ，React 执行 的 操作 也 不 同 。 


1. 当 根 节点 是 不 同类 型 时 


从 div 变 成 p、 从 ComponentA 变 成 ComponentB， 或 者 从 ComponentA 变 成 div， 这 些 都 是 节 
点 类 型 发 生变 化 的 情况 。 根 节点 类 型 的 变化 是 一 个 很 大 的 变化 ，React 会 认为 新 的 树 和 旧 的 树 完全 
不 同 , 不 会 再 继续 比较 其 他 属性 和 子 节点 , 而 是 把 整 棵 树 拆 掉 重 建 (包括 虚拟 DOM 树 和 真实 DOM 
树 ) 。 这 里 需要 注意 ， 虚 拟 DOM 的 节点 类 型 分 为 两 类 : 一 类 是 DOM 元 素 类 型 ， 比 如 div、p 等 ; 
一 类 是 React 组 件 类 型 , 比如 自 定义 的 React 组 件 。 在 旧 的 虚拟 DOM 树 被 拆除 的 过 程 中 , 上 日 的 DOM 
元 素 类 型 的 节点 会 被 销毁 ， 旧 的 React 组 件 实例 的 componentWillUnmount 会 被 调用 ;在 重建 的 过 
程 中 ， 新 的 DOM 元 素 会 被 插入 DOM 树 中 ， 新 的 组 件 实例 的 componentWillMount 和 
componentDidMount 方法 会 被 调用 。 重 建 后 的 新 的 虚拟 DOM 树 又 会 被 整体 更 新 到 真实 DOM 树 中 。 
这 种 情况 下 ， 需 要 大 量 DOM 操作 ， 更 新 效率 最 低 。 


2. 当 根 节点 是 相同 的 DOM 元 素 类 型 时 


如 果 两 个 根 节 点 是 相同 类 型 的 DOM 元 素 ，React 会 保留 根 节点 ， 而 比较 根 节 点 的 属性 ， 然 后 
只 更 新 那些 变化 了 的 属性 。 例 如 : 


<div className="foo" title="React" /> 





<div className="bar" title="React" /> 


React 比较 这 两 个 元 素 ， 发 现 只 有 className 属性 发 生 了 变化 ， 然 后 只 更 新 虚拟 DOM 树 和 真 
实 DOM 树 中 对 应 节点 的 这 一 属性 。 


3. 当 根 节点 是 相同 的 组 件 类 型 时 


如 果 两 个 根 节点 是 相同 类 型 的 组 件 ， 对 应 的 组 件 实例 不 会 被 销毁 ， 只 是 会 执行 更 新 操作 ， 同 
步 变 化 的 属性 到 虚拟 DOM 树 上 ， 这 一 过 程 组 件 实例 的 componentWillReceivePropsO 和 
componentWillUpdate0 会 被 调用 。 注 意 ， 对 于 组 件 类 型 的 节点 ，React 是 无 法 直接 知道 如 何 更 新 真 
实 DOM 树 的， 需要 在 组 件 更 新 并 且 render 方法 执行 完成 后 ,根据 render 返回 的 虚拟 DOM 结构 决 
定 如 何 更 新 真实 DOM 树 。 

比较 完 根 节点 后 ，React 会 以 同样 的 原则 继续 递归 比较 子 节点 ， 每 一 个 子 节点 相对 于 其 层级 以 
下 的 节点 来 说 又 是 一 个 根 节点 。 如 此 递归 比较 , 直到 比较 完 两 棵 树 上 的 所 有 节点 , 计算 得 到 最 终 的 
差异 ， 更 新 到 DOM 树 中 。 
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当 一 个 节点 有 多 个 子 节点 时 ， 默 认 情 况 下 ，React 只 会 按照 顺序 逐一 比较 两 棵 树 上 对 应 的 子 节 
点 。 例 如 ， 比 较 下 面 的 两 个 节点 ， 两 棵 树 上 的 <li>first</li> 和 <li>second</li> 子 节点 会 分 别 被 匹配 ， 
最 终 只 会 插入 一 个 新 的 节点 <li>third</li>。 


<ul> 
<1li>first</1i> 
<li>second</1i> 


</ul> 


<ul> 
<1li>first</1i> 
<li>second</1i> 
<li>third</1i> 


</ul> 


但 如 果 在 子 节点 的 开始 位 置 新 增 一 个 节点 ， 情 况 就 会 变 得 截然 不 同 。 例 如 下 面 的 例子 ， 
<li>third<li> 插 入 子 节点 的 第 一 个 位 置 ，React 会 把 第 一 棵 树 的 <li>first</i> 和 第 二 棵 树 的 
<li>third<Ai> 进 行 比较 ， 把 第 一 棵 树 的 <li>second<Ai> 和 第 二 棵 树 的 <li>first</li> 进 行 比较 ， 最 后 发 
现 新 增 了 一 个 <li>second<Wli> 节 点 。 这 种 比较 方式 会 导致 每 一 个 节点 都 被 修改 。 


<ul> 
<1i>first</1i> 
<li>second</1i> 
</ul> 


<ul> 
<li>third</1i> 
<1li>first</1i> 
<li>second</1i> 


</ul> 


为 了 解决 这 种 低 效 的 更 新 方式 ，React 提供 了 一 个 key 属性 。 在 2.4 节 已 经 介绍 过 ， 当 演 染 列 
表 元 素 时 ， 需 要 为 每 一 个 元 素 定 义 一 个 key。 这 个 key 就 是 为 了 帮助 React 提高 Diff 算法 的 效率 。 
当 一 组 子 节点 定义 了 key，React 会 根据 key 来 匹配 子 节点 ， 在 每 次 渲染 之 后 ， 只 要 子 节点 的 key 
值 没有 变化 ，React 就 认为 这 是 同一 个 节点 。 例 如 ， 为 前 面 的 例子 定义 key: 


<ul> 
<li key="first" >first</1i> 
<1i key="second">second</1i> 


</ul> 


<ul> 
<1i key="third">third</1i> 
<li key="first">first</1i> 
<1i key="second">second</1i> 


</ul> 
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定义 key 之 后 ，React 就 能 判断 出 <li key="third">third</l> 这 个 节点 是 新 增 节点 ，<1i 
key="first">first</li> 和 <li key="second">second</li> 两 个 节点 并 没有 发 生 改 变 , 只 是 位 置 发 生 了 变化 
而 已 。 如 此 一 来 ，React 只 需要 执行 一 次 插入 新 节点 的 操作 。 这 里 同时 揭露 了 另 一 个 问题 ， 尽 量 不 
要 使 用 元 素 在 列表 中 的 索引 值 作为 key， 因 为 列表 中 的 元 素 顺序 一 旦 发 生 改 变 ， 就 可 能 导致 大 量 的 
key 失效 ， 进 而 引起 大 量 的 修改 操作 。 例 如 ， 下 面 的 写法 应 该 尽量 避免 : 


<ul> 
{list.map((item, index) => <li key={index}>{item}</1i> )} 


</ul> 


最 后 ， 需 要 提醒 读者 ， 本 章 介绍 的 Di 全 算法 是 React 当前 采用 的 实现 方式 ，React 会 不 断 改 进 
Di 算法 ， 以 提高 DOM 比较 和 更 新 的 效率 。 


5.3 性 能 优化 


React 通过 虚拟 DOM、 高 效 的 Diff 算法 等 技术 极 大 地 提高 了 操作 DOM 的 效率 。 在 大 多 数 场 
景 下 ， 我 们 是 不 需要 考虑 React 程序 的 性 能 问题 的 ， 但 只 要 是 程序 ， 总 会 有 一 些 优化 的 措施 。 本 章 
就 来 介绍 一 下 React 中 常用 的 性 能 优化 方式 。 


1. 使 用 生产 环境 版 本 的 库 


这 是 性 能 优化 的 一 个 基本 原则 ， 也 是 很 容易 被 忽视 的 一 个 原则 。 我 们 使 用 create-react-app 脚 
手 架 创建 的 项 目 ， 在 以 npm run start 启动 时 ， 使 用 的 React 是 开发 环境 版 本 的 React 库 ， 包 含 大 量 
警告 消息 ， 以 帮助 我 们 在 开发 过 程 中 避免 一 些 常见 的 错误 ， 比 如 组 件 props 类 型 的 校 验 等 。 开 发 环 
境 版 本 的 库 不 仅 体积 更 大 ， 而 且 执行 速度 也 更 慢 ， 显 然 不 适合 在 生产 环境 中 使 用 。 那 么 ， 如 何 构建 
生产 环境 版 本 的 React 库 呢 ? 对 于 create-react-app 脚手架 创建 的 项 目 ， 只 需要 执行 npm run build， 
就 会 构建 生产 环境 版 本 的 React 库 。 其 原理 是 ， 一 般 第 三 方 库 都 会 根据 process.env.NODE_ENV 这 
个 环境 变量 决定 在 开发 环境 和 生产 环境 下 执行 的 代码 有 哪些 不 同 ， 当 执行 npm run build 时 ， 构 建 
脚本 会 把 NODE_ENYV 的 值 设置 为 production， 也 就 是 会 以 生产 环境 模式 编译 代码 。 

如 果 不 是 使 用 create-react-app 脚手架 创建 的 项 目 ， 而 是 完全 自己 编写 Webpack 的 构建 配置 ， 
那么 在 执行 生产 环境 的 构建 时 ， 就 需要 在 Webpack 的 配置 项 中 包含 以 下 插件 的 配置 : 


plugins: [ 
new webpack.DefinePlugin({ 
'process.env': { 
NODE _ ENV: JSON.stringify('production') 
} 
Ds, 
new UglifyJsSPlugin(), 
/1/..- 
] 
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当 NODE ENV 等 于 production 时 ， 不 仅 是 React， 项 目 中 使 用 到 的 其 他 库 也 会 执行 生产 环境 
版 本 的 构建 。 但 一 定 要 注意 ,在 开发 过 程 中 不 要 执行 这 项 设置 ， 因为 它 会 让 你 失去 很 多 重要 的 调试 
信息 ， 并 且 代 码 的 编译 速度 也 会 变 慢 。 


2. 避免 不 必要 的 组 件 泻 染 


当 组 件 的 props 或 state 发 生变 化 时 ,组 件 的 render 方法 会 被 重新 调用 ,返回 一 个 新 的 虚拟 DOM 
对 象 。 但 在 一 些 情况 下 ， 组 件 是 没有 必要 重新 调用 render 方法 的 。 例 如 ， 父 组 件 的 每 一 次 render 
调用 都 会 触发 子 组 件 componentWillReceiveProps 的 调用 ， 进 而 子 组 件 的 render 方法 也 会 被 调用 ， 
但 是 这 时 候 子 组 件 的 props 可 能 并 没有 发 生 改 变 ， 改 变 的 只 是 父 组 件 的 props 或 state， 所 以 这 一 次 
子 组 件 的 render 是 没有 必要 的 , 不 仅 多 了 一 次 render 方法 执行 的 时 间 , 还 多 了 一 次 虚拟 DOM 比较 
的 时 间 。 

React 组 件 的 生命 周期 方法 中 提供 了 一 个 shouldComponentUpdate 方法 ， 这 个 方法 的 默认 返回 
值 是 tue， 如 果 返 回 false， 组件 此 次 的 更 新 将 会 停止 ,也 就 是 后 续 的 componentWillUpdate、render 
等 方法 都 不 会 再 被 执行 。 我 们 可 以 把 这 个 方法 作为 钩子 , 在 这 个 方法 中 根据 组 件 自身 的 业务 逻辑 决 
定 返回 true 还 是 false， 从 而 避免 组 件 不 必要 的 演 染 。 例 如 ,我 们 通过 比较 props 中 的 一 个 自 定 义 属 
性 item， 决 定 是 否 需要 继续 组 件 的 更 新 过 程 ， 代 码 如 下 : 


class MyComponent extend React.Component { 





shouldComponentUpdate (nextProps, nextState) { 
if (nextProps.item === this.props.item) { 
return false; 
} 
return true; 


} 


HF is 
} 
注意 ， 示 例 中 对 item 的 比较 是 通过 一 = 比较 对 象 的 引用 ， 所 以 即使 两 个 对 象 的 引用 不 相等 ， 
它们 的 内 容 也 可 能 是 相等 的 。 最 精确 的 比较 方式 是 遍历 对 象 的 每 一 层级 的 属性 分 别 比较 , 也 就 是 进 
行 深 比较 〈deep compare) ， 但 shouldComponentUpdate 被 频繁 调用 ， 如 果 props 和 state 的 对 象 层 
级 很 深 ， 深 比较 对 性 能 的 影响 就 比较 大 。 一 种 折 中 的 方案 是 ， 只 比较 对 象 的 第 一 层级 的 属性 ， 也 就 
是 执行 浅 比较 〈shallow compare) 。 例 如 下 面 两 个 对 象 : 


const item = { foo, bar }; 

const nextItem = { foo, bar }; 

执行 浅 比较 会 使 用 二 = 比较 item.foo 和 nextItem.foo、item.bar 和 nextItem.bar， 而 不 会 继续 比 
较 foo、bar 的 内 容 。React 中 提供 了 一 个 PureComponent 组 件 ， 这 个 组 件 会 使 用 浅 比较 来 比较 新 旧 
props 和 state， 因 此 可 以 通过 让 组 件 继承 PureComponent 来 蔡 代 手 写 shouldComponentUpdate 的 有 逻 
辑 。 但 是 ， 使 用 浅 比较 很 容易 因为 直接 修改 数据 而 产生 错误 ， 例 如 : 

class NumberList extends React.PureComponent { 


constructor(props) { 
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super (props); 
this.state = { 
numbers: [1,2,3,4] 
Es 
this.handleClick = this.handleClick.bind (this); 
} 
// numbers 中 新 加 一 个 数值 
handleClick() { 
const numbers = this.state.numbers; 
// 直接 修改 numbers 对 象 
numbers.push (numbers [numbers.length-1] + 1); 
this.setState ({numbers: numbers}); 
} 


render() { 
return ( 
<div> 
<button onClick={this.handleClick} /> 
{this.state.numbers.map (item => <div>{item}</div>)} 
</div> 
) 7 
} 
} 


点 击 Button，NumberList 并 不 会 重新 调用 render， 因 为 handleClick 中 是 直接 修改 


this.state.numbers 这 个 数组 的 ，this.state.numbers 的 引用 在 setState 前 后 并 没有 发 生 改变 ， 所 以 
shouldComponentUpdate 会 返回 false， 从 而 终止 组 件 的 更 新 过 程 。 在 第 4 章 深入 理解 组 件 state 中 ， 
我 们 讲 到 要 把 state 当 作 不 可 变 对 象 ， 一 个 重要 的 原因 就 是 为 了 提高 组 件 state 比较 的 效率 。 对 于 不 
可 变 对 象 来 说 ， 只 需要 比较 对 象 的 引用 就 能 判断 state 是 否 发 生 改 变 。 


3. 使 用 key 
在 5.2 节 Diff 算 法 中 , 我 们 已 经 解释 了 列表 元 素 定义 key 的 好 处 。React 会 根据 key 索引 元 素 ， 


在 render 前 后 ， 拥 有 相同 key 值 的 元 素 是 同一 个 元 素 ， 例 如 前 面 举 过 的 例子 : 


// render 前 

<ul> 
<li key="first" >first</1i> 
<li key="second">second</1i> 


</ul> 


// render 后 
<ul> 


<1i key="third">third</1i> 
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<li key="first">first</1i> 
<1i key="second">second</1i> 


</ul 


定义 key 之 后 ，React 并 不 会 “傻瓜 式 ” 地 按 顺序 依次 更 新 每 一 个 元素: 把 第 一 个 下 元 素 更 
新 为 third， 把 第 二 个 元素 更 新 为 frst， 最 后 创建 一 个 新 的 开元 素 ， 内 容 为 second。 有 了 key 的 
索引 ，React 知道 first 和 second 这 两 个 元素 并 没有 发 生变 化 ， 而 只 会 在 这 两 个 元素 前 面 插 入 
一 个 内 容 为 third 的 元素 。 可 见 ，key 的 使 用 减少 了 DOM 操作 ， 提 高 了 DOM 更 新 效率 。 当 列表 
元 素数 量 很 多 时 ，key 的 使 用 更 显得 重要 。 

本 章 介 绍 的 这 三 种 性 能 优化 方法 是 最 常用 的 三 种 方法 ， 其 中 使 用 生产 环境 版 本 的 库 是 项 目 中 
必须 采用 的 ， 使 用 key 也 推荐 在 项 目 中 采用 。 通 过 重 写 shouldComponentUpdate 方法 避免 不 必要 的 
组 件 演 染 ， 这 在 项 目 开 始 阶段 是 可 以 不 必 在意 的 ， 大 多 数 情 况 下 ， 组 件 只 是 重复 调用 render 方法 
对 于 性 能 的 影响 并 不 大 。 当 发 现 项 目 确实 存在 性 能 问题 时 ， 再 考虑 通过 这 种 方式 进行 优化 也 不 迟 。 
请 大 家 记 住 ， 过 早 的 优化 并 不 是 一 件 好 事 。 


5.4 ”性 能 检测 工具 


我 们 可 以 通过 一 些 性 能 检测 工具 更 加 方便 地 定位 性 能 问题 。 
1. React Developer Tools for Chrome 


这 是 一 个 Chrome 插件 , 主要 用 来 检测 页 面 使 用 的 React 代码 是 否 是 生产 环境 版 本 。 当 访问 网 
页 时 ， 如 果 插 件 图 标的 背景 色 是 黑色 的 ， 就 表示 当前 网 页 使 用 的 是 生产 环境 版 本 的 React, 如 图 5-1 
所 示 。 





女 背景 色 是 黑色 的 











This page is using the production build of React. 回 
Open the developer tools, and the Reacttab will appear to the right. 





图 5-1 


如 果 插 件 图 标的 背景 色 是 红色 的 ， 就 表示 当前 网 页 使 用 的 是 开发 环境 版 本 的 React， 如 图 5-2 
所 示 。 














六 背景 色 是 红色 的 





This page is using the development build of React 妈 
Open the developer tools, and the React tab will appear to the right. 


Note that the development build is not suitable for production 
Make sure to use the production build before deployment. 





图 5-2 
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2. Chrome Performance Tab 


在 开发 模式 下 ， 可 以 通过 Chrome 浏览 器 提供 的 Performance 工具 观察 组 件 的 挂 载 、 更 新 、 镍 
载 过 程 及 各 阶段 使 用 的 时 间 。 使 用 方式 为 : 


(1) 确保 应 用 运行 在 开发 模式 下 。 

(2) 打开 Chrome 开发 者 工具 ， 切 换 到 Performance 窗口 ， 单 击 Record 按钮 开始 统计 。 
(3) 在 页 面 上 执行 需要 分 析 的 操作 ， 最 好 不 要 超过 20 秒 ， 时 间 太 长 会 导致 Chrome 卡 死 。 
(4) 单 击 Stop 按钮 结束 统计 ， 然 后 在 User Timing 里 查看 统计 结果 。 


3. why-did-you-update 

why-did-you-update 会 比较 组 件 的 state 和 props 的 变化 ， 从 而 发 现 组 件 render 方法 不 必要 的 
调用 。 

# 安 装 


npm install why-did-you-update --save-dev 


# 使 用 


import React from 'react' 


if (process.env.NODE ENV !== 'production') { 
const {whyDidYouUpdate} = require('why-did-you-update') 
whyDidYouUpdate (React) 

} 


5.5 ”本章 小 结 


本 章 介绍 了 React 的 虚拟 DOM 机 制 以 及 用 于 虚拟 DOM 比较 的 Di 企 算 法 ,虚拟 DOM 是 React 
应 用 高 效 运行 的 基础 。 本章 还 介绍 了 常用 的 性 能 优化 方法 和 性 能 检测 工具 , 性 能 优化 要 避免 过 早 优 
化 问题 。 掌 握 本 章 的 内 容 有 助 于 开发 出 更 加 高 效 的 React 应 用 。 





高 阶 组 件 是 React 中 一 个 很 重要 且 较 复杂 的 概念 ， 主 要 用 来 实现 组 件 逻 辑 的 抽象 和 复 用 ， 在 
很 多 第 三 方 库 (如 Redux) 中 都 被 使 用 到 。 即 使 开发 一 般 的 业务 项 目 ， 如 果 能 合理 地 使 用 高 阶 组 件 ， 
也 能 显著 提高 项 目的 代码 质量 。 本 章 将 详细 介绍 高 阶 组 件 的 概念 及 应 用 。 


6.1 基本 概念 





在 JavaScript 中 ， 高 阶 函 数 是 以 函数 为 参数 ， 并 且 返 回 值 也 是 函数 的 函数 。 类 似 地 ， 高 阶 组 件 
(简称 HOC ) 接收 React 组 件 作为 参数 ， 并 且 返 回 一 个 新 的 React 组 件 。 高 阶 组 件 本 质 上 也 是 一 个 
函数 ， 并 不 是 一 个 组 件 。 高 阶 组 件 的 函数 形式 如 下 : 


const EnhancedComponent = higherOrderComponent (WrappedComponent); 

我 们 先 通过 一 个 简单 的 例子 看 一 下 高 阶 组 件 是 如 何 进行 逻辑 复 用 的 。 现 在 有 一 个 组 件 
MyComponent, 需要 从 LocalStorage 中 获取 数据 , 然后 泻 染 到 界面 。 一般 情况 下 , 我 们 可 以 这 样 实现 : 

import React, { Component } from 'react' 

class MyComponent extends Component { 


componentWillMount() { 
let data = localStorage .getItem('data')7 
this.setstate({data}); 

} 
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render() { 


return <div>{this.state.data}</div> 
} 
} 


代码 很 简单 , 但 当 其 他 组 件 也 需要 从 LocalStorage 中 获取 同样 的 数据 展示 出 来 时 , 每 个 组 件 都 
需要 重 写 一 次 componentWilMount 中 的 代码 ， 这 显然 是 很 元 余 的 。 下 面 让 我 们 来 看 看 使 用 高 阶 组 
件 改写 这 部 分 代码 。 


import React, { Component } from 'react' 


function withPersistentData (WrappedComponent) { 
return class extends Component { 
componentWillMount() { 
let data = localStorage.getItem('data'); 
this.setstate({data}); 
, 


render() { 
// 通过 { . . .this .props} 把 传递 给 当前 组 件 的 属性 继续 传递 给 被 包装 的 组 件 
return <WrappedComponent data={this.state.data} {...this.props} /> 
} 
} 
} 
class MyComponent extends Component { 
render() { 
return <div>{this.props.data}</div> 
1 
} 


const MyComponentWithPersistentData = withPersistentData (MyComponent) 


withPersistentData 就 是 一 个 高 阶 组 件 ， 它 返回 一 个 新 的 组 件 ， 在 新 组 件 的 componentWilIMount 
中 统一 处 理 从 LocalStorage 中 获取 数据 的 逻辑 ,然后 将 获取 到 的 数据 通过 props 传递 给 被 包装 的 组 件 
WrappedComponent， 这 样 在 WrappedComponent 中 就 可 以 直接 使 用 this.props.data 获取 需要 展示 的 数 
据 。 当 有 其 他 的 组 件 也 需要 这 段 逻 辑 时 ， 继 续 使 用 withPersistentData 这 个 高 阶 组 件 包装 这 些 组 件 。 

通过 这 个 例子 可 以 看 出 高 阶 组 件 的 主要 功能 是 封装 并 分 离 组 件 的 通用 逻辑 ， 让 通用 逻辑 在 组 
件 间 更 好 地 被 复 用 。 高 阶 组 件 的 这 种 实现 方式 本 质 上 是 装饰 者 设计 模式 。 


6.2 使 用 场景 


高 阶 组 件 的 使 用 场景 主要 有 以 下 4 种 : 
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(1) 操纵 props 

(2) 通过 ref 访问 组 件 实例 
(3) 组 件 状态 提升 

(4) 用 其 他 元 素 包 装 组 件 


每 一 种 使 用 场景 通过 一 个 例子 来 说 明 。 
1. 操纵 props 
在 被 包装 组 件 接 收 props 前 ， 高 阶 组 件 可 以 先 拦截 到 props， 对 props 执行 增加 、 删 除 或 修改 


的 操作 ， 然 后 将 处 理 后 的 props 再 传递 给 被 包装 组 件 。6.1 节 中 的 例子 就 属于 这 种 情况 ， 高 阶 组 件 
为 WrappedComponent 增加 了 一 个 data 属性 。 这 里 不 再 额外 举例 。 
2. 通过 ref 访问 组 件 实例 
高 阶 组 件 通过 ref 获取 被 包装 组 件 实例 的 引用 , 然后 高 阶 组 件 就 具备 了 直接 操作 被 包装 组 件 的 
属性 或 方法 的 能 力 。 
function withRef (wrappedComponent) { 
return class extends React.Component { 
constructor (props) { 
super (props); 
this.someMethod = this.someMethod.bind (this); 
} 


someMethod() { 
this.wrappedInstance.someMethodInWrappedComponent (); 


} 


render() { 
// 为 被 包装 组 件 添加 ref 属性 ， 从 而 获取 该 组 件 实例 并 赋值 给 this .wrappedInstance 
return <WrappedComponent ref={ (instance) => {this.wrappedInstance = 
instance}} {...this.props} /> 
} 
} 
} 


当 WrappedComponent 被 泻 染 时 ， 执 行 ref 的 回调 函数 ， 高 阶 组 件 通过 this.wrappedInstance 保 
存 WrappedComponent 实例 的 引用 ， 在 someMethod 中 ， 通 过 this.wrappedInstance 调用 
WrappedComponent 中 的 方法 。 这 种 用 法 在 实际 项 目 中 很 少 会 被 用 到 ， 但 当 高 阶 组 件 封装 的 复 用 逻 
辑 需 要 被 包装 组 件 的 方法 或 属性 的 协同 支持 时 ， 这 种 用 法 就 有 了 用 武之 地 。 


3. 组 件 状 态 提升 


在 第 2 章 中 已 经 介绍 过 ， 无 状态 组 件 更 容易 被 复 用 。 高 阶 组 件 可 以 通过 将 被 包装 组 件 的 状态 
及 相应 的 状态 处 理 方法 提升 到 高 阶 组 件 自身 内 部 实现 被 包装 组 件 的 无 状态 化 。 一 个 典型 的 场景 是 ， 
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利用 高 阶 组 件 将 原本 受 控 组 件 需要 自己 维护 的 状态 统一 提升 到 高 阶 组 件 中 。 


function withCcontrolledState (WrappedComponent) { 
return class extends React.Component { 
constructor(props) { 
super (props); 
this.state = { 
Value: '' 

}; 
this.handleValueChange = this.handleValueChange.bind(this); 


handleValueChange (event) { 
this.setState({ 
Value: event .target.value 
1 


render() { 
// newProps 保存 受 控 组 件 需要 使 用 的 属性 和 事件 处 理 函数 
const newProps = { 
controlledProps: { 
value: this.state.value, 
onChange: this.handleValueChange 
} 
] 7 
return <WrappedComponent {...this.props} {...newProps}/> 


} 
这 个 例子 把 受 控 组 件 value 属 性 用 到 的 状态 和 处 理 value 变 化 的 回调 函数 都 提升 到 高 阶 组 件 中 ， 
当 我 们 再 使 用 受 控 组 件 时 ， 就 可 以 这 样 使 用 : 


class SimpleControlledComponent extends React.Component { 


render() { 
// 此 时 的 simplecontrolledcomponent 为 无 状态 组 件 ， 状 态 由 高 阶 组 件 维护 


return <input name="simple" {...this.props.controlledProps }/> 


const ComponentWithControlledState = withControlledstate 


(SimpleControlledComponent); 
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4. 用 其 他 元 素 包 装 组 件 


我 们 还 可 以 在 高 阶 组 件 渲染 WrappedComponent 时 添加 额外 的 元 素 ， 这 种 情况 通常 月 
WrappedComponent 增加 布局 或 修改 样式 。 


function withRedBackground (WrappedComponent) { 














于 为 


return class extends React.Component { 
render() { 
return ( 
<div style={{backgroundColor: ‘'red'}}> 
<WrappedComponent {...this.props}/> 


</div> 


高 阶 组 件 的 参数 并 非 只 能 是 一 个 组 件 ， 它 还 可 以 接收 其 他 参数 。 例 如 ，6.1 节 的 示例 是 从 
LocalStorage 中 获取 key 为 data 的 数据 ， 当 需要 获取 的 数据 的 key 不 确定 时 ，withPersistentData 这 
个 高 阶 组 件 就 不 满足 需求 了 。 我 们 可 以 让 它 接收 一 个 额外 的 参数 来 决定 从 LocalStorage 中 获取 哪个 
数据 : 


import React, { Component } from 'react' 


function withPersistentData (WrappedComponent, key) { 
return class extends Component { 
componentWillMount() { 
let data = localstorage.getItem(key); 
this.setstate({data}); 
} 


render() { 
// 通过 { . . .this .props} 把 传递 给 当前 组 件 的 属性 继续 传递 给 被 包装 的 组 件 


return <WrappedComponent data={this.state.data} {...this.props} /> 


} 


class MyComponent extends Component { 
render() { 


return <div>{this.props.data}</div> 
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} 
// 获取 key=' data’ 的 数据 


const MyComponentlWithPersistentData = withPersistentData (MyComponent, 
dnta"}s 
// 获取 key=' name"' 的 数据 


const MyComponent2WithPersistentData = withPersistentData (MyComponent, 


'name'); 


新 版 本 的 withPersistentData 满足 获取 不 同 key 值 的 需求 。 但 实际 情况 中 ， 我 们 很 少 使 用 这 种 
方式 传递 参数 ， 而 是 采用 更 加 灵活 、 更 具 通 用 性 的 函数 形式 : 


HOC(.. .params) (WrappedComponent) 


HOC(...params) 的 返回 值 是 一 个 高 阶 组 件 ， 高 阶 组 件 需要 的 参数 是 先 传递 给 HOC 函数 的 。 用 
这 种 形式 改写 withPersistentData 如 下 〈 注 意 : 这 种 形式 的 高 阶 组 件 使 用 箭头 函数 定义 更 为 简洁 ) : 


import React, { Component } from 'react' 


function withPersistentData = (key) => (WrappedComponent) => { 
return class extends Component { 
componentWillMount() { 
let data = localStorage.getItem(key); 
this.setState({data}); 


render() { 
// 通过 { . . .this .props} 把 传递 给 当前 组 件 的 属性 继续 传递 给 被 包装 的 组 件 


return <WrappedComponent data={this.state.data} {...this.props} /> 


} 


class MyComponent extends Component { 
render() { 
return <div>{this.props.data}</div> 


} 
// 获取 key=' data' 的 数据 
const MyComponentlWithPersistentData = withPersistentData('data') 


(MyComponent); 
// 获取 key=' name" 的 数据 


const MYComponent2WithPersistentData = withPersistentData('name') 


(MyComponent); 


实际 上 ,这 种 形式 的 高 阶 组 件 大 量 出 现在 第 三 方 库 中 , 例如 react-redux 中 的 connect 函数 就 是 
一 个 典型 的 例子 。connect 的 简化 定义 如 下 : 
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connect (mapStateToProps, mapDispatchToProps) (WrappedComponent) 


这 个 函数 会 将 一 个 React 组 件 连接 到 Redux 的 store 上 ， 在 连接 的 过 程 中 ，connect 通过 函数 
参数 mapStateToProps 从 全 局 store 中 取出 当前 组 件 需要 的 state, 并 把 state 转化 成 当前 组 件 的 props; 
同时 通过 函数 参数 mapDispatchToProps 把 当前 组 件 用 到 的 Redux 的 action creators 以 props 的 方式 
传递 给 当前 组 件 。connect 并 不 会 修改 传递 进去 的 组 件 的 定义 ， 而 是 会 返回 一 个 新 的 组 件 。 


connect 的 参数 mapStateToProps、mapDispatchToProps 是 函数 类 型 ， 说 明 高 阶 组 件 的 参 
注意 。 数 也 可 以 是 函数 类 型。 


例如 ， 把 组 件 ComponentA 连接 到 Redux 上 的 写法 类 似 于 : 


const ConnectedComponentA = connect (mapStateToProps，mapDispatchToProps) 
(ComponentA); 


我 们 可 以 把 它 拆 分 来 看 : 
// connect 是 一 个 函数 ， 返 回 值 enhance 也 是 一 个 函数 


const enhance = connect (mapStateToProps, mapDispatchToProps); 
// enhance 是 一 个 高 阶 组 件 


const ConnectedComponentA = enhance (ComponentA); 


这 种 形式 的 高 阶 组 件 非 常 容易 组 合 起 来 使 用 ， 因 为 当 多 个 函数 的 输出 和 它 的 输入 类 型 相同 时 ， 
这 些 函 数 很 容易 组 合 到 一 起 使 用 。 例 如 ， 有 f、g、h 三 个 高 阶 组 件 ， 都 只 接收 一 个 组 件 作为 参数 ， 
于 是 我 们 可 以 很 方便 地 嵌 套 使 用 它们 : f( g( h(WrappedComponent) ) )。 这 里 有 一 个 例外 ， 即 最 内 层 
的 高 阶 组 件 h 可 以 有 多 个 参数 , 但 其 他 高 阶 组 件 必 须 只 能 接收 一 个 参数 , 只 有 这 样 才能 保证 内 层 的 
函数 返回 值 和 外 层 的 函数 参数 数量 一 臻 都 只 有 1 个 ) 。 

例如 ， 将 connect 和 另 一 个 打印 日 志 的 高 阶 组 件 withLog0“〈 注 意 ，withLog0 的 执行 结果 才 是 
真正 的 高 阶 组 件 ) 联合 使 用 : 


//connect 的 参数 是 可 选 参数 ， 这 里 省 略 了 mapDispatchToProps 参数 


const ConnectedComponentA = connect (mapStateToProps) (withLog () 





(ComponentR) ) 7 
我 们 还 可 以 定义 一 个 工具 函数 compose(...funcs): 


function compose(...funcs) { 
if (funcs.length === 0) { 
return arg => arg 
于 
if (funcs.length === 1) { 
return funcs[0] 


} 


return funcs.reduce((a,b) => (...args) => a(b(args)))7 


} 
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调用 compose(£ g, h) 等 价 于 .args) => f(g(h(.…args)))。 用 compose 函数 可 以 把 高 阶 组 件 杠 套 的 
写法 打 平 : 


const enhance = Compose( 
connect (mapStateToProps), 
withLog() 

) 


const ConnectedComponentA = enhance (ComponentRA) 


像 Redux 等 很 多 第 三 方 库 都 提供 了 compose 的 实现 ，compose 结合 高 阶 组 件 使 用 可 以 显著 提 
高 代码 的 可 读 性 和 逻辑 的 清晰 度 。 


6.4 继承 方式 实现 高 阶 组 件 


前 面 介 绍 的 高 阶 组 件 的 实现 方式 都 是 由 高 阶 组 件 处 理 通用 逻辑 ， 然 后 将 相关 属性 传递 给 被 包 
装 组 件 ， 我 们 称 这 种 实现 方式 为 属性 代理 。 除 了 属性 代理 外 ， 还 可 以 通过 继承 方式 实现 高 阶 组 件 : 
通过 继承 被 包装 组 件 实现 逻辑 的 复 用 。 继承 方 式 实现 的 高 阶 组 件 常用 于 泻 染 动 持 。 例 如 ， 当 用 户 处 
于 登录 状态 时 ， 人 允许 组 件 泻 染 ， 和 否则 演 染 一 个 空 组 件 。 示 例 代码 如 下 : 


function withRuth (WrappedComponent) { 
return class extends WrappedComponent { 
render() { 
if (this.props.loggedIin) { 
return super.render(); 
} else { 
return null; 
} 
} 
} 
} 


根据 WrappedComponent 的 this.props.loggedIn 判断 用 户 是 否 已 经 登录 ， 如 果 登 录 ， 就 通过 
super.render0 调 用 WrappedComponent 的 render 方法 正常 泻 染 组 件 ， 否 则 返回 一 个 null。 继 承 方式 
实现 的 高 阶 组 件 对 被 包装 组 件 具有 侵入 性 , 当 组 合 多 个 高 阶 组 件 使 用 时 , 很 容易 因为 子 类 组 件 忘记 
通过 super 调用 父 类 组 件 方法 而 导致 逻辑 丢失 。 因 此 ， 在 使 用 高 阶 组 件 时 ， 应 尽量 通过 代理 方式 实 
现 高 阶 组 件 。 


6.5 注意 事项 


使 用 高 阶 组 件 需要 注意 以 下 事项 。 
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(1) 为 了 在 开发 和 调试 阶段 更 好 地 区 别 包 装 了 不 同 组 件 的 高 阶 组 件 ， 需 要 对 高 阶 组 件 的 显示 
名 称 做 自 定义 处 理 。 常 用 的 处 理 方式 是 ， 把 被 包装 组 件 的 显示 名 称 也 包 到 高 阶 组 件 的 显示 名 称 中 。 
以 withPersistentData 为 例 : 


function withPersistentData (WrappedComponent) { 


return class extends Component { 
// 结 合 被 包装 组 件 的 名 称 ， 自 定义 高 阶 组 件 的 名 称 


static displayName = “HOC(${getDisplayName (WrappedComponent) }) 7 


render() { 
ff ws 
} 
} 
} 


function getDisplayName (WrappedComponent) { 
return WrappedComponent .displayName || WrappedComponent.name || 
'Component'; 
} 
(2) 不 要 在 组 件 的 render 方法 中 使 用 高 阶 组 件 ， 尽 量 也 不 要 在 组 件 的 其 他 生命 周期 方法 中 使 
用 高 阶 组 件 。 因 为 调用 高 阶 组 件 ， 每 次 都 会 返回 一 个 新 的 组 件 ， 于 是 每 次 render， 前 一 次 高 阶 组 件 
创建 的 组 件 都 会 被 卸载 (unmount) ， 然 后 重新 挂 载 (mount) 本 次 创建 的 新 组 件 ， 既 影响 效率 ， 
又 丢失 了 组 件 及 其 子 组 件 的 状态 。 例 如 : 
render() { 
// 每 次 render，enhance 都 会 创建 一 个 新 的 组 件 ， 尽 管 被 包装 的 组 件 没有 变 
const EnhancedComponent = enhance (MyComponent); 


// 因为 是 新 的 组 件 ， 所 以 会 经 历 旧 组 件 的 卸载 和 新 组 件 的 重新 挂 载 


return <EnhancedComponent />; 


} 


所 以 , 高 阶 组 件 最 适合 使 用 的 地 方 是 在 组 件 定义 的 外 部 ， 这 样 就 不 会 受到 组 件 生命 周期 的 影响 。 
(3) 如 果 需 要 使 用 被 包装 组 件 的 静态 方法 ， 那 么 必须 手动 复制 这 些 静 态 方法 。 因 为 高 阶 组 件 
返回 的 新 组 件 不 包含 被 包装 组 件 的 静态 方法 。 例 如 : 


// WrappedComponent 组 件 定义 了 一 个 静态 方法 staticMethod 
WrappedCcomponent . staticMethod = function() { 

//... 
} 


加 





function withHOC (WrappedComponent) { 
class Enhance extends React.Component { 
li 
} 
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// 手动 复制 静态 方法 到 Enhance 上 
Enhance .staticMethod = WrappedComponent .staticMethod; 
return Enhance; 


} 


(4) Refs 不 会 被 传递 给 被 包装 组 件 。 尽 管 在 定义 高 阶 组 件 时 ， 我 们 会 把 所 有 的 属性 都 传递 给 
被 包装 组 件 , 但 是 ref 并 不 会 传递 给 被 包装 组 件 。 如 果 在 高 阶 组 件 的 返回 组 件 中 定义 了 ref， 那么 它 
指向 的 是 这 个 返回 的 新 组 件 ,而 不 是 内 部 被 包装 的 组 件 。 如果 希 望 获取 被 包装 组 件 的 引用 ,那么 可 
以 自 定义 一 个 属性 ， 属 性 的 值 是 一 个 函数 ， 传 递 给 被 包装 组 件 的 ref 。 下 面 的 例子 就 是 用 inputRef 
这 个 属性 名 代替 常规 的 ref 命名 : 


function FocusInput({ inputRef, ...rest }) { 
// 使 用 高 阶 组 件 传递 的 ijnputRef 作为 ref 的 值 
return <input ref={inputRef} {...rest} />; 


} 
//enhance 是 一 个 高 阶 组 件 


const EnhanceInput = enhance (FocusInput); 


// 在 一 个 组 件 的 render 方法 中 ， 自 定义 属性 inputRef 代替 ref， 
// 保证 inputRef 可 以 传递 给 被 包装 组 件 
return (<EnhanceInput 
inputRef={ (input) => { 
this.input = input 
} 
}>) 


// 组 件 内 ， 让 FocusInput 自动 获取 焦点 


this.input.focus(); 


(5) 与 父 组 件 的 区 别 。 高 阶 组 件 在 一 些 方面 和 父 组 件 很 相似 。 例 如 ， 我 们 完全 可 以 把 高 阶 组 
件 中 的 逻辑 放 到 一 个 父 组 件 中 去 执行 , 执行 完成 的 结果 再 传递 给 子 组 件 , 但 是 高 阶 组 件 强调 的 是 逻 
辑 的 抽象 。 高 阶 组 件 是 一 个 函数 ， 函 数 关注 的 是 逻辑 ， 父 组 件 是 一 个 组 件 ， 组 件 主要 关注 的 是 
UIDOM。 如 果 罗 辑 是 与 DOM 直接 相关 的 ， 那 么 这 部 分 逻辑 适合 放 到 父 组 件 中 实现 ， 如 果 多 辑 是 
与 DOM 不 直接 相关 的 ， 那 么 这 部 分 逻辑 适合 使 用 高 阶 组 件 抽象 ， 如 数据 校 验 、 请 求 发 送 等 。 


6.6 本章 小 结 


本 章 详细 介绍 了 高 阶 组 件 。 高 阶 组 件 主要 用 于 封装 组 件 的 通用 逻辑 ， 常 用 在 操纵 组 件 props、 
通过 ref 访问 组 件 实例 、 组 件 状态 提升 和 用 其 他 元 素 包 装 组 件 等 场景 中 。 高 阶 组 件 可 以 接收 被 包装 
组 件 以 外 的 其 他 参数 ,多 个 高 阶 组 件 还 可 以 组 合 使 用 。 高 阶 组 件 一 般 通 过 代理 方式 实现 , 少量 场景 
中 也 会 使 用 继承 方式 实现 。 灵 活 使 用 高 阶 组 件 可 以 显著 提高 代码 质量 。 


第 3 篇 ”实战 篇 


在 大 型 Web 应 用 中 使 用 React 





路 由 : 用 React Router 开发 单 页面 应 用 


真实 项 目 中 ， 一般 需 要 通过 不 同 的 URL 标识 不 同 的 页 面 ， 也 就 是 存在 页 面 间 路 由 的 需求 ， 这 
时 候 就 该 React Router 发 挥 作用 了 。React Router 是 React 技术 栈 中 最 常用 的 用 于 构建 单 页 面 应 用 
的 解决 方案 。 本 章 就 来 详细 介绍 React Router。 


7.1 基本 用 法 


7.1.1 单 页 面 应 用 和 前 端 路 由 


在 传统 的 Web 应 用 中 , 浏览 器 根据 地 址 栏 的 URL 向 服务 器 发 送 一 个 HITP 请 求 , 服务 器 根据 
URL 返回 一 个 HTML 页 面 。 这 种 情况 下 ， 一 个 URL 对 应 一 个 HTML 页 面 ， 一 个 Web 应 用 包含 很 
多 HIML 页 面 , 这 样 的 应 用 就 是 多 页 面 应 用 ; 在 多 页 面 应 用 中 ， 页 面 路 由 的 控制 由 服务 器 端 负责 ， 
这 种 路 由 方式 称 为 后 端 路 由 。 

在 多 页 面 应 用 中 ， 每 次 页 面 切换 都 需要 向 服务 器 发 送 一 次 请 求 ， 页 面 使 用 到 的 静态 资源 也 需 
要 重新 请 求 加 载 ， 存 在 一 定 的 浪费 。 而 且 ， 页 面 的 整体 刷新 对 用 户 体验 也 有 影响 ， 因 为 不 同 页 面 间 
往往 存在 共同 的 部 分 ， 例 如 导航 栏 、 侧 边栏 等 ， 页 面 整 体 刷新 也 会 导致 共用 部 分 的 刷新 。 

有 没有 一 种 方式 让 Web 应 用 只 是 看 起 来 像 多 页 面 应 用 , 实际 URL 的 变化 可 以 引起 页 面 内 容 的 
变化 , 但 不 会 向 服务 器 发 送 新 的 请 求 呢 ? 实际 上 , 满足 这 种 要 求 的 Web 应 用 就 是 单 页 面 应 用 (Single 
Page Application， 简 称 SPA) 。 单 页 面 应 用 虽然 名 为 “ 单 页 ”， 但 视觉 上 的 感受 仍然 是 多 页 面 ， 
为 URL 发 生变 化 , 页 面 的 内 容 也 会 发 生变 化 , 但 这 只 是 逻辑 上 的 多 页 面 , 实际 上 无 论 URL 如 何 变 
化 ， 对 应 的 HTML 文件 都 是 同一 个 ， 这 也 是 单 页 面 应 用 名 字 的 由 来 。 在 单 页 面 应 用 中 ，URL 发 生 
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变化 并 不 会 向 服务 器 发 送 新 的 请 求 ， 所 以 “逻辑 页 面 ”( 这 个 名 称 用 来 和 真实 的 HIML 页 面 区 分 ) 
的 路 由 只 能 由 前 端 负责 ， 这 种 路 由 方式 称 为 前 端 路 由 。 
React Router 就 是 一 种 前 端 路 由 的 实现 方式 。 通过 使 用 React Router 可 以 让 Web 应 用 根据 不 同 
的 URL 泻 染 不 同 的 组 件 ， 这 样 的 组 件 泻 染 方 式 可 以 解决 更 加 复杂 的 业务 场景 。 例 如 ， 当 URL 的 
pathname 为 /list 时 ， 页 面 会 泻 染 一 个 列表 组 件 ， 当 点 击 列表 中 的 一 项 时 ，pathname 更 改 为 /item/:id 
(id 为 参数 ) ， 旧 的 列表 组 件 会 被 卸载 ， 取 而 代 之 的 是 一 个 新 的 单一 项 的 详情 组 件 。 


目前 ， 国 内 的 搜索 引擎 大 多 对 单 页 面 应 用 的 SEO 支持 的 不 好 ， 因 此 ， 对 于 SEO 非常 
注意 看 重 的 Web 应 用 (例如 ， 企 业 官方 网 站 、 电 商 网 站 等 ) ， 一 般 还 是 会 选择 采用 多 页 面 
应 用 。React 也 并 非 只 能 用 于 开发 单 页 面 应 用 。 


7.1.2 ”React Router 的 安装 
本 书 使 用 的 React Router 的 大 版 本 号 是 v4， 这 也 是 写作 本 书 时 的 最 新 版 本 。 


React Router 包含 3 个 库 : react-router、react-router-dom 和 react-router-native。react-router 提供 
最 基本 的 路 由 功能 ， 实 际 使 用 时 ， 我 们 不 会 直接 安装 reactrouter， 而 是 根据 应 用 运行 的 环境 选择 安 
装 react-router-dom( 在 浏览 器 中 使 用 ) 或 react-router-native( 在 react-native 中 使 用 )。react-router-dom 
和 react-router-native 都 依赖 于 react-router， 所 以 在 安装 时 ,react-router 也 会 自动 安装 。 因 为 本 书 介 
绍 的 是 创建 Web 应 用 ， 所 以 这 里 需要 安装 react-router-dom: 


npm install react-router-dom 


(3 React Router v4 是 对 React Router 的 一 次 彻底 重 构 , 采用 动态 路 由 , 遵循 React 中 一 切 

看 组 件 的 思想 ， 每 一 个 Route (路 由 ) 都 是 一 个 普通 的 React 组 件 ， 这 一 点 也 导致 V4 
版 本 较 之 前 的 版 本 在 API 和 使 用 方式 上 都 有 了 巨大 变化 ， 也 就 是 说 ，v4 版 本 并 不 兼容 
之 前 的 React Router 版 本 ， 请 读者 务必 注意 。 


7.1.3 ”路 由 器 


React Router 通过 Router 和 Route 两 个 组 件 完成 路 由 功能 。 Router 可 以 理解 成 路 由 器 ,一 个 应 
用 中 只 需要 一 个 Router 实例 ， 所 有 的 路 由 配置 组 件 Route 都 定义 为 Router 的 子 组 件 。 在 Web 应 用 
中 ， 我 们 一 般 会 使 用 对 Router 进行 包装 的 BrowserRouter 或 HashRouter 两 个 组 件 。BrowserRouter 
使 用 HTML 5 的 history API(pushState replaceState 等 ) 实现 应 用 的 UI 和 URL 的 同步 。HashRouter 
使 用 URL 的 hash 实现 应 用 的 UI 和 URL 的 同步 。 

BrowserRouter 创建 的 URL 形式 如 下 : 


注意 


http://example.com/some/path 
HashRouter 创建 的 URL 形式 如 下 : 
http://example.com/#/some/path 


使 用 BrowserRouter 时 ， 一 般 还 需要 对 服务 器 进行 配置 ， 让 服务 器 能 正确 地 处 理 所 有 可 能 的 
URL。 例如 ， 当 浏览 器 发 送 http://example.com/some/path 和 http://example.com/some/path2 两 个 请 求 
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时 ， 服 务 器 需要 能 返回 正确 的 HIML 页 面 〈 也 就 是 单 页 面 应 用 中 唯一 的 HIML 页 面 ) 。 使 用 
HashRouter 则 不 存在 这 个 问题 , 因为 hash 部 分 的 内 容 会 被 服务 器 自动 忽略 , 真正 有 效 的 信息 是 hash 
前 面 的 部 分 ， 而 对 于 单 页 面 应 用 来 说 ， 这 部 分 内 容 是 固定 的 。 
Router 会 创建 一 个 history 对 象 ，history 用 来 跟踪 URL， 当 URL 发 生变 化 时 ，Router 的 后 代 
组 件 会 重新 演 染 。React Router 中 提供 的 其 他 组 件 可 以 通过 context 获取 history 对 象 (在 4.3 节 组 件 
通信 中 已 经 详细 介绍 过 context) ， 这 也 隐 含 说 明了 React Router 中 的 其 他 组 件 必须 作为 Router 组 
件 的 后 代 组 件 使 用 。 但 Router 中 只 能 有 了 唯一 的 一 个 子 元 素 ， 例 如 : 
// 正确 
ReactDOM.render(( 
<BrowserRouter> 
<App /> 
</BrowserRouter> 
), document.getElementById('root')) 
// 错误 ，Router 中 包含 两 个 子 元 素 
ReactDOM.render(( 
<BrowserRouter> 
<Appl /> 
<App2 /> 
</BrowserRouter> 
), document.getElementById('root')) 


7.1.4 ”路 由 配置 


Route 是 React Router 中 用 于 配置 路 由 信息 的 组 件 , 也 是 React Router 中 使 用 频率 最 高 的 组 件 。 
每 当 有 一 个 组 件 需要 根据 URL 决定 是 否 演 染 时 ， 就 需要 创建 一 个 Route。 


1. path 


每 个 Route 都 需要 定义 一 个 path 属性 ， 当 使 用 BrowserRouter 时 ，path 用 来 描述 这 个 Route 匹 
配 的 URL 的 pathname; 当 使 用 HashRouter 时 ，path 用 来 描述 这 个 Route 匹配 的 URL 的 hash。 例 
如 ， 使 用 BrowserRouter 时 ，<Route path='/foo' /> 会 匹配 一 个 pathname 以 foo 开始 的 URL (如 
http://example.com/foo) 。 当 URL 匹配 一 个 Route 时 ， 这 个 Route 中 定义 的 组 件 就 会 被 泻 染 出 来 ; 
反之 ，Route 不 进行 渲染 (Route 使 用 children 属性 泻 染 组 件 除外 ， 可 参考 下 文 ) 。 


本 章 中 的 示例 ， 如 无 特殊 说 明 ， 使 用 的 都 是 BrowserRouter。 
注 意 
2. match 
当 URL 和 Route 匹配 时 , Route 会 创建 一 个 match 对 象 作 为 props 中 的 一 个 属性 传递 给 被 泻 染 
的 组 件 。 这 个 对 象 包含 以 下 4 个 属性 。 


(1) params: Route 的 path 可 以 包含 参数 , 例如 <Route path='/foo/:id> 包 含 一 个 参数 id。 params 
就 是 用 于 从 匹配 的 URL 中 解析 出 pa 了 h 中 的 参数 ,例如 , 当 URL="http://example.conyfoo/1" 时 , params 
= {id: 1}。 
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(2) isExact: 是 一 个 布尔 值 , 当 URL 完全 匹配 时 , 值 为 tue; 当 URL 部 分 匹配 时 , 值 为 false。 
例如 ， 当 path="/foo"、URIL="http://example.com/foo" 时 ， 是 完全 匹配 ; 当 URL="http://example.com/ 


foo/1" 时 ， 是 部 分 匹配 。 
(3) path: Route 的 path 属性 ， 构 建 嵌 套路 由 时 会 使 用 到 。 
(4) url: URL 的 匹配 部 分 。 
3. Route 泻 染 组 件 的 方式 
Route 如 何 决定 泻 染 的 内 容 呢 ? Route 提供 了 3 个 属性 ， 用 于 定义 待 泻 染 的 组 件 : 
component 
component 的 值 是 一 个 组 件 , 当 URL 和 Route 匹配 时 , component 属性 定义 的 组 件 就 会 被 泻 染 。 
例如 : 


<Route path='/foo' component={Foo}> 


当 URL="http://example.com/foo" 时 ，Foo 组 件 会 被 泻 染 。 


render 
render 的 值 是 一 个 函数 ， 这 个 函数 返回 一 个 React 元 素 。 这 种 方式 可 以 方便 地 为 待 泻 染 的 组 件 


传递 额外 的 属性 。 例 如 : 
<Route path='/foo' render={ (Props) => ( 
<Foo {...props} data={extraProps} /> 
) }> 


Foo 组 件 接收 了 一 个 额外 的 data 属性 。 


国 Children 
children 的 值 也 是 一 个 函数 ， 函 数 返回 要 演 染 的 React 元 素 。 与 前 两 种 方式 不 同 之 处 是 ， 无 论 是 


否 匹 配 成 功 ，children 返回 的 组 件 都 会 被 泻 染 。 但 是 ， 当 匹配 不 成 功 时 ，match 属性 为 null。 例 如 : 


<Route path='/foo' children={ (props) => ( 
<div className={props.match ? "active' : ''}> 
<Foo /> 
</div> 


</Route> 
如 果 Route 匹配 当前 URL， 待 泻 染 元 素 的 根 节 点 div 的 class 将 被 设置 成 active。 
4. Switch 和 exact 


当 URL 和 多 个 Route 匹配 时 ， 这 些 Route 都 会 执行 泻 染 操作 。 如 果 只 想 让 第 一 个 匹配 的 Route 泻 
染 ， 那 么 可 以 把 这 些 Route 包 到 一 个 Switch 组 件 中 。 如 果 想 让 URL 和 Route 完全 匹配 时 ，Route 才 泻 
染 ， 那 么 可 以 使 用 Route 的 exact 属性 。Switch 和 exact 常常 联合 使 用 ， 用 于 应 用 首页 的 导航 。 例 如 : 


<Router> 


<Switch> 
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<Route exact path='/' component={Home}/> 

<Route path='/posts' component={Posts}/> 

<Route path='/:user' component={User}/> 
</Switch> 


</Router> 


如 果 不 使 用 Switch， 当 URL 的 pathname 为 "/posts" 时 ，<Route path='/posts' /> 和 <Route 
path='/:user' 这 都 会 被 匹配 ， 但 显然 我 们 并 不 希望 <Route path="/:user' /> 被 匹配 ， 实 际 上 也 没有 用 户 
名 为 posts 的 用 户 。 如 果 不 使 用 exact，"" "wposts" wuserl" 等 几乎 所 有 URL 都 会 匹配 第 一 个 Route， 
又 因为 Switch 的 存在 ， 后 面 的 两 个 Route 永远 也 不 会 被 匹配 。 使 用 exact， 保 证 只 有 当 URL 的 
pathname 为 "/" 时 ， 第 一 个 Route 才 会 被 匹配 。 


5. 嵌 套 路 由 


欧 套 路 由 是 指 在 Route 泻 染 的 组 件 内 部 定义 新 的 Route。 例如， 在 上 一 个 例子 中 ， 在 Posts 组 
件 内 再 定义 两 个 Route: 


const Posts = ({ match }) => { 
return ( 
<div> 
{/* 这 里 match.url 等 于 /posts */} 
<Route path={“${match.url}/:id*} component={PostDetail} /> 
<Route exact path={match.url} component={PostList} /> 
</div> 
); 
} 


当 URL 的 pathname 为 "/posts/react" 时 ,PostDetail 组 件 会 被 泻 染 ; 当 URL 的 pathname 为 "/posts" 
时 ，PostList 组 件 会 被 泻 染 。Route 的 嵌 套 使 用 让 应 用 可 以 更 加 灵活 地 使 用 路 由 。 


7.1.5 ”链接 


Link 是 React Router 提供 的 链接 组 件 ， 一 个 Link 组 件 定义 了 当 点 击 该 Link 时 ， 页 面 应 该 如 何 
路 由 。 例 如 : 


const Navigation = () => ( 
<header> 
<nav> 
<ul> 
<1i><Link to='/'>Home</Link></1i> 
<li><Link to="'/posts'>Posts</Link></1i> 
</ul> 
</nav> 


</header> 
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Link 使 用 to 属性 声明 要 导航 到 的 URL 地 址 。to 可 以 是 string 或 object 类 型 ， 当 to 为 object 
类 型 时 ， 可 以 包含 pathname、search、hash、state 四 个 属性 ， 例 如 : 


<Link to={{ 
pathname: '/posts', 
search: '?sort=name', 
hash: '#the-hash', 
state: { fromHome: true } 
19/> 
除了 使 用 Link 外 ,我们 还 可 以 使 用 history 对 象 手动 实现 导航 。history 中 最 常用 的 两 个 方法 是 
push(path，[state]) 和 replace(path，[state])，push 会 向 浏览 历史 记录 中 新 增 一 条 记录 ，replace 会 用 新 
记录 蔡 换 当前 记录 。 例 如 : 
history.push('/posts') 


history.replace('/posts') 
7.2 项 目 实战 


本 节 将 使 用 React Router 继续 完善 BBS 项 目 。 为 了 避免 由 于 项 目 过 于 复杂 而 不 便 讲解 和 理解 ， 
因此 这 里 只 抽象 出 BBS 项 目 中 最 核心 的 三 个 页 面 : 


e 登录 页 ， 负 责 应 用 的 登录 功能 。 
日 帖子 列表 页 ， 以 列表 形式 展示 所 有 帖子 的 基本 信息 。 
。 帖子 详情 页 ， 展 示 菜 个 帖子 的 详细 内 容 。 


具备 这 三 个 页 面 ，BBS 的 核心 功能 也 就 基本 完整 了 。 本 节 项 目 源 代码 的 目录 为 /chapter-07/ 


bbs-router。 


7.2.1 后 台 服务 API 介绍 


真实 BBS 项 目的 数据 肯定 要 保存 到 后 台 的 数据 库 中 ， 同 时 需要 依赖 后 台 服务 提供 的 API 实现 
对 应 用 所 需 数据 的 增 、 删 、 改 、 查 操作 。 本 书 不 涉及 后 台 开 发 的 内 容 ， 为 了 更 接近 真实 的 项 目 开发 
场景 ， 使 用 APICloud 的 数据 云 功 能 快速 地 生成 了 所 需 的 API。API 的 生成 方式 不 做 介绍 ， 这 里 主 
要 介绍 API 的 使 用 。 

按照 业务 功能 划分 ，API 可 以 分 为 三 类 : 登录 、 帖 子 和 评论 。 


1. 登录 : /userlogin 
执行 用 户 登 录 验 证 。 注 销 不 调用 后 台 的 API， 只 在 客户 端 清 除 登录 信息 。 注 意 ， 这 是 一 个 简化 
的 登录 和 注销 流程 ， 并 不 适用 于 真实 项 目 。 


因为 示例 项 目 不 涉 及 注册 功能 , 我 们 预先 在 后 台 创建 好 三 个 账号 , 用 户 名 分 别 是 : tom、 
注意 jack、steve， 密 码 均 是 : 123456。 读 者 可 使 用 这 三 个 账号 登录 应 用 。 
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2. 帖子 : /post 


与 帖子 相关 的 操作 都 通过 这 个 API 完成 ， 包 括 获取 帖子 列表 数据 、 获 取 某 个 帖子 的 详情 、 新 
增 帖子 、 修 改 帖子 等 。APICloud 生成 的 API 是 RESTful API， 因 此 /post 实际 上 相当 于 多 个 API， 
例如 以 HITP Get 方法 调用 接口 用 于 获取 帖子 数据 ， 以 HITP Post 方法 调用 接口 用 于 新 增 帖子 ， 以 
Http Put 方法 调用 接口 用 于 修改 帖子 。 这 属于 RESTful API 规范 ， 这 里 不 再 展开 。 


3. 评论 : /comment 


与 评论 相关 的 操作 都 通过 这 个 API 完成 ， 包 括 获 取 某 一 个 帖子 的 评论 列表 和 新 增 一 条 评论 。 
为 方便 调用 ，API 相关 信息 已 被 封装 到 utils/urljs 中 ， 代 码 如 下 : 


// 获取 帖子 列表 的 过 滤 条 件 
Const postListFilter = { 
fields: ["id"，"title"，"author"，"Vote"， "updatedAt"], 
limit: 10, 
order: "updatedAt DESC", 
include: "authorPointer", 
includefilter: { user: { fields: ["id", "username"] } } 
}; 


// 获取 帖子 详情 的 过 滤 条 件 
const postByIdFilter = id => ({ 
fields: ["id"，"title"，"author"， "vote", "updatedAt", "content"], 
where: { id: id }, 
include: "authorPointer", 
includefilter: { user: { fields: ["id", "username"] } } 
1D); 


// 获取 评论 列表 的 过 滤 条 件 
const commentListFilter = postId => ({ 
fields: ["id", "author", "updatedAt", "content"], 
where: { post: postId }, 
limit: 20， 
order: "updatedAt DESC"， 
include: "authorPointer", 
includefilter: { user: { fields: ["id", "username"] } } 


]) 7 
function encodeFilter (filter) { 
return encodeURIComponent (JSON .stringify (filter) )7 


} 


export default { 
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// 登录 

login: () => "/user/login", 

// 获取 帖子 列表 

getPostList: () =>、`/post?filter=$fencodeFilter (postListFilter)}, 
// 获取 帖子 详情 

getPostById: id => `/post?filter=${encodeFilter (postByIdFilter(id))}, 
// 新 建 帖子 

createPost: () => "/post", 

// 修改 帖子 

updatePost: id => `/post/${id}, 

// 获取 评论 列表 


getCommentList: postId => 
/comment?filter=${encodeFilter (commentListFilter(post1Id))}, 
// 新 建 评论 
createComment: () => "/comment" 
}; 


读者 重点 关注 最 后 export 的 对 象 ， 这 个 对 象 包含 项 目 中 需要 使 用 的 所 有 API 信息 。 至 于 前 面 
定义 的 变量 和 函数 ， 是 根据 APICloud 的 规范 提供 API 调用 时 所 需 的 过 滤 条 件 ， 可 不 必 深 究 。 

我 们 使 用 HTML 5 fetch 接口 调用 API, 在 utils/request.js 中 对 fetch 进行 了 封装 , 定义 了 get、 post、 
put 三 个 方法 ， 分 别 满足 以 不 同 HTTP 方法 (Get、Post、Put) 调用 API 的 场景 。 主 要 代码 如 下 : 


function get(url) { 

return fetch(url, { 
method: "GET"， 
headers: headers, 

}) .then (response => { 
return handleResponse (url, response); 

}).catchl(err => { 
console.error( Request failed. Url = ${url} . Message = ${err} ) 7 
return {error: {message: "Request failed."™}}; 


function post(url, data) { 

return fetch(url, { 
method: "POST", 
headers: headers, 
body: JSON.stringify(data) 

}) .then (response => { 
return handleResponse (url, response); 

}) .catch(err => { 
console.error(“ Request failed. Url = ${url} . Message = ${err} ); 


return {error: {message: "Request failed."™}}; 
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Eunction put(url, data) { 


return fetch(url, { 
method: "PUT"， 
headers: headers, 
body: JSON.stringify (data) 

}) .then (response => { 
return handleResponse (url, response); 


}).catchl(err => { 
console.error(“ Request failed. Url = ${url} . Message = ${err} ); 
return {error: {message: "Request failed."™}}; 


}) 


function handleResponse (url, response) { 


if(response.status < 500){ 
return response.json(); 


}else{ 
console.error( Request failed. Url = ${url} . Message = 


${response.statusText} ) 7 
return {error: {message: "Request failed due to server error "™}}; 


export {get, post, put} 


因为 APICloud 提供 的 API 和 本 地 程序 运行 在 不 同 域 下 ， 所 以 本 地 程序 直接 调用 APICloud 的 


API 会 存在 跨 域 调用 的 问题 。 我 们 利用 代理 服务 器 解决 这 个 问题 。 在 create-react-app 中 使 用 代理 很 
简单 ， 只 需要 在 项 目的 package.json 中 配置 proxy 属性 ，proxy 的 值 是 请 求 要 转发 到 的 最 终 地 址 。 


APICloud 提供 的 API 运行 在 https://d.apicloud.com/mcm/api 下 ， 因 此 配置 如 下 : 


"proxy": "https://d.apicloud.com/mcm/api™" 


但 需要 注意 ， 使 用 这 种 方式 配置 代理 只 在 开发 环境 模式 下 有 效 ， 即 npm start 启动 程序 时 ， 代 


理 有 效 。 
7.2.2 路 由 设计 
路 由 设计 的 过 程 可 以 分 为 两 步 : 
(1) 为 每 一 个 页 面 定义 有 语义 的 路 由 名 称 (path) 。 
(2) 组 织 Route 结构 层次 。 
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1. 定义 路 由 名 称 
我 们 有 三 个 页 面 ， 按 照 页 面 功 能 不 难 定义 出 如 下 的 路 由 名 称 : 


e。 登录 页 : /login。 
e ”帖子 列表 页 : /posts。 
e。 帖子 详情 页 : /posts/:id (id 代表 帖子 的 ID )。 


但 是 这 些 还 不 够 ， 还 需要 考虑 打开 应 用 时 的 默认 页 面 ， 也 就 是 根 路 径 "/" 对 应 的 页 面 。 结 合 业 
务 场景 ,帖子 列表 页 作为 应 用 的 默认 页 面 最 为 合适 ,， 因此， 帖子 列表 页 对 应 两 个 路 由 名 称 :"/posts" 
和 "/"。 

2. 组 织 Route 结构 层次 


React Router 4 并 不 需要 在 一 个 地 方 集中 声明 应 用 需要 的 所 有 Route, Route 实际 上 也 是 一 个 普 
通 的 React 组 件 ， 可 以 在 任意 地 方 使 用 它 〈 前 提 是 ，Route 必须 是 Router 的 子 节点 ) 。 当 然 ， 这 样 
的 灵活 性 也 一 定 程度 上 增加 了 组 织 Route 结构 层次 的 难度 。 

我 们 先 来 考虑 第 一 层级 的 路 由 。 登 录 页 和 帖子 列表 页 (首页) 应 该 属于 第 一 层级 : 


<Router> 
<Switch> 
<Route exact path="/" component={Home} /> 
<Route path="/login" component={Login} /> 
<Route path="/posts" component={Home} /> 
</Switch> 
</Router> 


第 一 个 Route 使 用 了 exact 属性 , 保证 只 有 当 访 问 根 路 径 时 , 第 一 个 Route 才 会 匹配 成 功 .Home 
是 首页 对 应 的 组 件 ， 可 以 通过 "/posts" 和 "/" 两 个 路 径 访 问 首页 。 注 意 ， 这 里 并 没有 直接 泻 染 帖子 列 
表 组 件 , 真正 泻 染 帖 子 列表 组 件 的 地 方 在 Home 组 件 内 , 通过 第 二 层级 的 路 由 处 理 帖 子 列表 组 件 和 
帖子 详情 组 件 的 泻 染 ，components/Home.jjs 的 主要 代码 如 下 : 


class Home extends Component { 


/** 省 略 其 余 代码 **/ 


render () { 
const { match, location } = this.props; 
const { username } = this.state; 
return ( 
<div> 
<Header 
username={username} 
onLogout={this.handleLogout} 
location={location} 
/> 
{/* 帖子 列表 路 由 配置 */} 
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<Route 


path={match.url} 


exact 

render={props => <PostList username={username} {...props} />} 
Pes 
{/* 帖子 详情 路 由 配置 */} 
<Route 


path={“ ${match.url}/:id } 
render={props => <Post username={username} {...props} />} 
/> 
</div> 


); 


Home 的 render 内 定义 了 两 个 Route， 分别 用 于 泻 染 帖子 列表 和 帖子 详情 。PostList 是 帖子 列 


表 组 件 ，Post 是 帖子 详情 组 件 ， 代 码 使 用 Route 的 render 属性 演 染 这 两 个 组 件 ， 因 为 它们 需要 接收 
额外 的 username 属性 。 另 外 ， 无 论 访问 的 是 帖子 列表 页 面 〈 首 页 ) 还 是 帖子 详情 页 面 ， 都 会 共用 
相同 的 Header 组 件 。 


7.2.3 登录 页 


登录 页 的 界面 很 简单 ， 只 需要 提供 一 个 form 表单 供用 户 输入 登录 信息 即 可 。 因 此 ， 


components/Login.js 中 的 render 方法 如 下 : 


render() { 
// from 保存 跳 转 到 登录 页 前 的 页 面 路 径 ， 用 于 在 登录 成 功 后 重 定向 到 原来 的 页 面 
const { from } = this.props.location.state || { from: { pathname: "/" } } 
const { redirectToReferrer } = this.state; 
// 登录 成 功 后 ，redirectToReferrer 为 true， 使 用 Redirect 组 件 重 定 向 页 面 
if (redirectToReferrer) { 
return <Redirect to={from} />; 
} 
return ( 
<form className="login" onSubmit={this.handleSubmit}> 
<div> 
<label> 
用 户 名 : 
<input 
name="username™" 
type="text™" 
value={this.state.username} 
onChange={this.handleChange} 
As 
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</label> 
</div> 
<div> 
<label> 
密码 
<input 
name="password" 
type="password" 
value={this.state.password} 
onChange={this.handleChange} 
A> 
</label> 
</div> 
<input type="submit" value=" 登 录 " /> 
</form> 
) 7 
} 


当 用 户 点 击 “ 登 录 ” 按 钮 时 ， 会 调用 后 台 的 登录 API 进行 验证 ， 登 录 成 功 后 ， 将 用 户 信 息 存 
储 到 sessionStorage 中 ,其 他 页 面 根据 sessionStorage 中 是 否 有 用 户 信息 判断 应 用 是 否 处 于 登录 状态 。 
登录 逻辑 代码 如 下 : 


handleSubmit(e) { 
e.preventDefault (); 
const username = this.state.username; 


const password = this.state.password; 





if (username.length =: 0 |1| password.length === 0) { 
alert ("用 户 名 或 密码 不 能 为 空 ! ") ; 
return; 
} 
const params = { 
username, 
password 
] 
post (url.login(), params) .then(data => { 
if (data.error) { 
alert (data.error.message || "login failed"); 
} else { 
// 保存 登录 信息 到 sessionstorage 
sessionSstorage.setItem("userId", data.userId); 
sessionStorage.setItem("username", username); 
// 登录 成 功 后 ， 设 置 redirectToReferrer 为 true 


this.setstatel({ 
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redirectToReferrer: true 


登录 成 功 后 ，Login 组 件 会 修改 state 中 的 redirectToReferrer 为 tue， 当 再 次 render 时 , 会 演 染 
React Router 的 Redirect 组 件 ， 这 个 组 件 用 于 页 面 的 重 定向 ， 将 页 面 重 定向 到 登录 前 的 页 面 或 首页 
(没有 上 一 个 页 面 的 情况 下 〉。 完 整 的 components/Login.js 的 代码 如 下 : 


import React, { Component } from "react"; 
import { Redirect } from "react-router-dom"; 


import { post } from "../utils/request"; 
import url from "../utils/url"; 


import "./Login.css"; 


class Login extends Component { 
constructor (props) { 
super (props); 
this.state = { 


username: " 





password: " 
redirectToReferrer: false  // 是 否 重 定 向 到 之 前 的 页 面 
}; 
this.handleChange = this.handleChange.bind(this); 
this.handleSubmit = this.handleSubmit.bind(this); 
$ 


// 处 理 用 户 名 、 密 码 的 变化 
handlechange (e) { 
if (e.target.name === "username") { 
this.setState({ 
username: e.target.value 
DD); 
} else if (e.target.name === "password") { 
this.setState({ 
password: e.target.value 
DD); 
} else { 


// do nothing 


Ls 


// 提交 登录 表单 
handleSubmit (e) { 


e.preventDefault (); 
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const username = this.state.username; 


const password = this.state.password; 





if (username.length 0 11 password.length === 0) { 
alert ("用 户 名 或 密码 不 能 为 空 ! ") ; 
returns 
} 
const params = { 
username, 
password 
ys 
post (url.login(), params) .then(data => { 
if (data.error) { 
alert (data.error.message || "login failed"); 
} else { 
// 保存 登录 信息 到 sessionstorage 
sessionStorage.setItem("userId", data.userId); 
sessionStorage.setItem("username", username); 
// 登录 成 功 后 ， 设 置 redirectToReferrer 为 true 
this.setState({ 
redirectToReferrer: true 
]) 7 


3 
} 


render() { 
// from 保存 跳 转 到 登录 页 前 的 页 面 路 径 ， 用 于 在 登录 成 功 后 重 定向 到 原来 的 页 面 
const { from } = this.props.location.state || { from: { pathname: 
const { redirectToReferrer } = this.state; 
// 登录 成 功 后 ，redirectToReferrer 为 true,， 使 用 Redirect 组 件 重 定向 页 面 
if (redirectToReferrer) { 
return <Redirect to={from} />; 
} 
return ( 
<form className="login" onSubmit={this.handlesSubmit}> 
<div> 
<label> 
用 户 名 : 
<input 
name="username™" 
type="text™" 
value={this.state.username} 


onChange={this.handleChange} 





} 


] 
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/> 
</label> 
</div> 
<div> 
<label> 
密码 : 
<input 
name="password" 
type="password" 
value={this.state.password} 
onChange={this.handleChange} 
PE 
</label> 
</div> 
<input type="submit"” value=" 登 录 " /> 
</form> 
); 


} 


export default Login; 


7.2.4 ”帖子 列表 页 
帖子 列表 页 也 是 项 目的 首页 。 我 们 先 划分 出 页 面 中 的 主要 组 件 ， 如 图 7-1 所 示 。 


首页 当前 用 户 : jack | 计划 


Header 


PostList 


PostEditor 


前 端 框架 ， 你 最 爱 哪 一 个 


创建 人 : tom 
更 新 对 间 : 2017-11-18 18:3 
路 0 
Postltem 
Web App 的 时 代 已 经 到 来 
创建 人 :steve 
更 新 时 间 : 2017-11-16 58 
PostsView 啤 0 





大 家 一 起 来 讨论 React 吧 
创建 人 : jack 

更 新 对 间 : 2017-11-15 16:34 
响 0 





图 7-1 
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页 面 划分 为 Header 和 PostList 两 大 组 件 ，PostList 中 又 包含 PostEditor 和 PostsView 组 件 ， 
了 PostsView 中 包含 PostItem 组 件 。 这 只 是 其 中 一 种 组 件 划分 方式 ， 组 件 划分 的 方式 并 不 唯一 ， 还 可 
以 使 用 其 他 划分 方式 ， 例 如 把 PostEditor 移 到 PostList 外 ， 让 它 和 PostList 处 于 同一 层级 。 如 果 帖 
子 列 表 的 每 一 项 样式 和 逻辑 都 很 简单 ， 就 不 需要 单独 拆 分 出 PostItem 组 件 。 总 之 ， 划 分 页 面 组 件 
需要 根据 页 面 的 结构 、 组 件 的 复 用 性 、 组 件 的 复杂 度 等 因素 综合 考虑 。 


划分 组 件 容 易 走 两 个 极端 ， 组 件 粒度 过 大 和 组 件 粒度 过 小 。 若 组 件 粒 度 过 大 ， 则 组 件 
逻辑 过 于 复杂 ， 组 件 的 可 维护 性 和 复 用 性 都 变 差 ， 若 组 件 粒度 过 小 ， 则 项 目 中 的 组 件 
数量 激增 ， 一 个 简单 功能 往往 需要 引入 大 量 组 件 ， 增 加 开发 成 本 ， 组 件数 量 过 多 也 不 
便于 查找 。 一 种 观点 是 ， 一 个 组 件 只 负责 一 个 功能 。 对 于 这 种 观点 ， 建 议 大 家 辩证 地 
看 待 ， 如 果 几 个 功能 都 很 简单 ， 且 每 一 个 功能 都 没有 复 用 的 需求 ， 那 么 将 这 几 个 功能 
放 到 一 个 组 件 中 也 未 尝 不 可 ， 这 样 做 可 以 提高 开发 效率 。 事实 上 ， 本 书 中 有 些 组 件 也 
是 包含 多 个 简单 功能 的 。 


注 意 


下 面 我 们 就 来 逐一 分 析 这 几 个 组 件 。 
1. Header 


Header 组 件 定义 了 页 面 的 项 部 导航 栏 , 其 中 使 用 了 两 个 Link 组 件 , 分 别 导航 到 首页 和 登录 页 。 
代码 如 下 : 


import React, { Component } from "react"; 
import { Link } from "react-router-dom"; 


import "./Header.css"; 


class Header extends Component { 
render() { 
const { username, onLogout, location } = this.props; 
return ( 
<div className="header"> 
<div className="nav"> 
<span className="left-link"> 
<Link to="/"> 首 页 </Link> 
</span> 
{/* 用 户 已 登录 ， 显 示 登 录用 户 的 信息 ， 和 否则 显示 登录 按钮 */} 
{username && username.length > 0 ? ( 
<span className="user"> 
当前 用 户 : {username}&nbsp; 
<button onClick={onLogout}> 注 销 </button> 
</span> 
):( 
<span className="right-link"> 
{/* 通过 state 属性 ， 保 存 当前 页 面 的 地 址 */} 


<Link to={{ pathname: "/login", state: { from: location } }}> 
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登录 
</Link> 
</span> 
hE 
</div> 
</div> 
); 
* 
} 


export default Header; 


导航 到 登录 页 Link 的 to 属性 的 值 不 是 一 个 字符 串 ， 而 是 一 个 对 象 : { pathname: "/login", state: 


{ from: location } }。 对 象 中 的 location 是 当前 页 面 的 位 置 ， 这 样 在 Login 组 件 执行 完 登 录 逻 辑 后 ， 
可 以 从 this.props.location.state 中 获取 上 一 个 页 面 的 location， 然 后 重 定向 到 上 一 个 页 面 。 


2. PostList 
PostList 是 这 个 页 面 中 最 复杂 的 组 件 ， 它 负责 获取 帖子 列表 数据 、 保 存 新 建 的 帖子 以 及 控制 


PostEditor 的 显示 与 隐藏 。PostList 的 state 包含 两 个 属性 ， 即 posts 和 newPost， 分 别 用 于 保存 帖子 
列表 数据 和 判断 当前 是 否 正 在 创建 新 的 帖子 。 


当 PostList 组 件 挂 载 后 ， 调 用 后 台 API 获取 列表 数据 ， 代 码 如 下 : 


componentDidMount() { 
this.refreshPostList(); 
} 


refreshPostList() { 
// 调用 后 台 API 获取 列表 数据 ， 并 将 返回 的 数据 设置 到 state 中 
get (url.getPostList()) .then(data => { 
if (!data.error) { 
this.setState({ 
posts: data, 
newPost: false 
1); 
} 
]) 
} 


PostList 的 render 方法 如 下 : 


render() { 
const { userId } = this.props; 
return ( 
<div className="postList"> 


<div> 
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<h2> 帖 子 列表 </h2> 
{/* 只 有 在 登录 状态 ， 才 显示 发 帖 按 钮 */} 
{userId ? <button onClick={this.handleNewPost}> 发 帖 </button> : null} 
</div> 
{/* 车 当前 正在 创建 新 帖子 ， 则 泻 染 PostEqitor 组 件 */} 
{this.state.newPost ? ( 
<PostEditor onSave={fthis.handleSave} onCancel={this.handleCancel} /> 
) : null} 
{/* PostsView 显示 帖子 的 列表 数据 */} 
<PostsView posts={this.state.posts} /> 
</div> 
) 7 
} 


render 中 渲染 组 件 PostEditor 和 PostsView，PostsView 用 于 展示 帖子 列表 ，PostEditor 用 于 创 
建新 的 帖子 。 保存 新 帖子 的 回调 函数 handleSave 也 定义 在 PostList 中 , 主要 执行 的 逻辑 是 调用 后 台 
API 保存 新 帖子 ， 保 存 完成 后 ， 再 刷新 帖子 列表 数据 ， 代 码 如 下 : 


handleSave (data) { 
// 当前 登录 用 户 的 信息 和 默认 的 点 赞 数 , 同 帖子 的 标题 和 内 容 , 共同 构成 最 终 待 保存 的 帖子 对 象 
const postData = { ...data, author: this.props.userId, vote: 0 }; 
post (url.createPost(), postData) .then(data => { 
if (!data.error) { 
// 保存 成 功 后 ， 刷 新 帖子 列表 


this.refreshPostList(); 


Hs 
} 


另外 ，PostList 控制 PostEditor 的 显示 与 隐藏 的 逻辑 是 : 当 用 户 处 于 登录 状态 且 点 击 了 发 帖 按 
钮 后 ，PostEditor 会 被 泻 染 。 
components/PostListjs 的 完整 代码 如 下 : 


import React, { Component } from "react"; 
import { Link } from "react-router-dom"; 
import PostsView from "./PostsView"; 

import PostEditor from "./PostEditor"; 

import { get, post } from "../utils/request"; 
import url from "../utils/url"; 


import "./PostList.css"; 


class PostList extends Component { 
constructor(props) { 
super (props); 


this.state = { 
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posts: []， 

newPost: false 
ys 
this.handleCancel = this.handleCancel .bind (this); 
this.handleSave = this.handleSave.bind(this); 
this.handleNewPost = this.handleNewPost.bind(this); 
this.refreshPostList = this.refreshPostList.bind(this); 


} 


componentDidMount () { 
this.refreshPostList(); 


// 获取 帖子 列表 
refreshPostList() { 
// 调用 后 台 API 获取 列表 数据 ， 并 将 返回 的 数据 设置 到 state 中 
get (ur1.getPostList()) .then(data => { 
if (!data.error) 1{ 
this .setState({ 
posts: data, 


newPost: false 
1); 


1); 
} 


// 保存 帖子 
handleSave(data) { 
// 当前 登录 用 户 的 信息 和 默认 的 点 赞 数 ， 同 帖子 的 标题 和 内 容 ， 共 同 构成 最 终 待 保存 的 帖子 对 象 
const postData = { ...data, author: this.props.userId, vote: 0 }; 
post (url.createPost(), postData) .then(data => { 
if (!data.error) { 


// 保存 成 功 后 ， 刷 新 帖子 列表 


this.refreshPostList (); 


]) 
和 


// 取消 新 建 帖子 
handleCancel() { 
this.setState({ 
newPost: false 


Ds 
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// 新 建 帖 子 
handleNewPost () { 
this .setState({ 
newPost: true 
Ds 
, 


render() { 
const { userId } = this.props; 
return ( 
<div className="postList"> 
<div> 
<h2> 帖 子 列表 </h2> 
{/* 只 有 在 登录 状态 ， 才 显示 发 帖 按钮 */} 


{userId ? <button onClick={this.handleNewPost}> 发 帖 </putton> :mull} 
</div> 
{/* 若 当 前 正在 创建 新 帖子 ， 则 泻 染 PostEditor 组 件 */} 
{this.state.newPost ? ( 

<PostEditor onSave={this.handleSave} onCancel={this.handleCancel} /> 


) : null} 

{/* PostsView 显示 帖子 的 列表 数据 */} 

<PostsView posts={this.state.posts} /> 
</div> 


); 


} 


export default PostList; 


3. PostEditor 


PostEditor 用 于 编辑 帖子 的 信息 ， 不 仅 会 在 帖子 列表 页 中 使 用 ， 在 帖子 详情 页 中 也 会 使 用 。 在 
帖子 列表 页 ，PostEditor 用 于 发 布 新 帖子 ， 在 帖子 详情 页 ，PostEditor 用 于 修改 当前 帖子 的 信息 。 
PostEditor 的 UI 很 简单 ， 主 要 由 一 个 input 和 一 个 textarea 组 成 ， 负 责 输 入 帖子 的 标题 和 正文 。 
PostEditor 只 负责 界面 逻辑 ， 真 正 保存 数据 的 逻辑 是 通过 调用 父 组 件 的 回调 函数 来 完成 的 ， 
components/PostEditorjs 的 代码 如 下 : 


import React, { Component } from "react"; 


import "./PostEditor.css"; 


class PostEditor extends Component { 
constructor(props) { 
super (props); 
const { post } = this.props; 
this.state = { 
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title: (post && post.title) || 
content: (post && post.content) || "" 

1; 

this.handleCancelClick = this.handleCancelClick.bind (this); 
this.handleSaveClick = this.handleSaveClick.bind(this); 
this.handleChange = this.handleChange.bind(this); 


} 


// 处 理 帖 子 的 编辑 信息 
handleChange(e) { 
const name = e.target.name; 
if (name === "title") { 
this.setState({ 
title: e.target.value 
]) 7 
} else if (name === "content") { 
this.setState({ 
content: e.target.value 
]) 7 
Ek lae: | 
} 
} 


// 取消 帖子 的 编辑 
handleCancelclick() { 
this.props.onCancel (); 


} 


// 保存 帖子 
handleSaveClick() { 
const data = { 
title: this.state.title, 
content: this.state.content 
入 
// 调用 父 组 件 的 回调 函数 执行 真正 的 保存 逻辑 


this.props.onSave (data); 


render() { 
return ( 
<div className="postEditor"> 
<input 
type="text™ 
name="title™ 
placeholder=" 标 题 " 
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value={this.state.title} 
onChange={this.handleChange} 

/> 

<textarea 
name="content™" 
placeholder=" 内 容 " 
value={this.state.content} 
onChange={this.handleChange} 

/> 

<button onclick={this.handleCancelClick}> 取 消 </button> 

<button oncClick={this.handleSaveClick}> 保 存 </button> 

</div> 
) 7 


export default PostEditor; 


4. PostsView 


PostsView 负责 显示 帖子 列表 。PostsView 泻 染 PostItem 时 ， 每 个 PostItem 外 面 都 包 里 了 一 个 
React Router 的 Link 组 件 ， 这 样 点 击 每 一 个 帖子 项 ， 都 会 跳 转 到 该 帖子 的 详情 页 。 
components/PostsView.js 的 代码 如 下 : 


import React, { Component } from 'react'; 
import { Link } from "react-router-dom"; 


import PostItem from "./PostItem"; 


class PostsView extends Component { 
render() { 
const { posts } = this.props 
return ( 
<ul> 
{posts.map(item => ( 
// 使 用 Link 组 件 包 衷 每 一 个 PostItem 
<Link key={item.id} to={ /posts/Sfitem.idl }> 
<PostItem post={item} /> 
</Link> 
ae: 
</ul> 
); 


export default PostsView; 
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5. Postltem 


PostItem 组 件 用 于 演 染 帖子 列表 的 每 一 项 ， 它 不 负责 任何 业务 逻辑 ， 只 关注 组 件 的 泻 染 ， 


使 用 一 个 无 状态 的 函数 组 件 实现 PostItem。components/PostItemjs 的 代码 如 下 : 


import React from "react"; 
import { getFormatDate } from "../utils/date"; 
import "./PostItem.css"; 


import like from "../images/like.png"; 
function PostItem(Props) { 
const { post } = props; 
return ( 
<li className="postItem"> 
<div className="title">{post.title}</div> 
<div> 
创建 人 : <span>{post.author.username}</span> 
</div> 
<div> 
更 新 时 间 : <span>{getFormatDate (post .updatedAt) }</span> 
</div> 
<div className="like"> 
<span> 
<img alt="vote" src={like} /> 
</span> 
<span>{post.vote}</span> 
</div> 
</1i> 
} 
} 


export default PostItem; 


7.2.5 ”帖子 详情 页 
帖子 详情 页 有 两 种 状态 ， 即 浏览 状态 和 编辑 状态 ， 分 别 对 应 图 7-2 和 图 7-3。 


我 们 


在 编辑 状态 下 ， 对 页 面 进行 组 件 划分 ， 分 为 Header、Post、PostEditor、CommentList 和 
CommentsView 。 其 中 ，Header 和 PostEditor 已 经 实现 ， 这 里 只 分 析 Post、CommentList 和 


CommentsView。 (为 简化 逻辑 ， 帖 子 的 点 赞 功能 并 未 实现 。) 
1. Post 


Post 负责 获取 帖子 详情 数据 、 修 改 帖子 以 及 展示 和 创建 帖子 的 评论 。 在 组 件 挂 载 后 ，Post 调 


用 后 台 API 获取 帖子 详情 和 帖子 的 评论 数据 ， 代 码 如 下 : 
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首页 当前 用 户 : jack 尘 银 


大 家 一 起 来 讨论 React 吧 
jack . 2017-11-15 16:34 .| 编辑 
前 堪 UI 的 复杂 化 ， 其 本 于 问题 是 如 何 将 来 源 于 服务 器 端的 动态 数据 和 用户 的 交互 行为 高 效 的 反观 到 复杂 的 月 户 弄 面 上 。React 另 


辟 蹊 径 ， 通 过 引入 虚拟 DOM、 状 态 、 单 向 数据 流 等 设计 理念 ， 形 成 以 组 件 为 核心 ， 用 组 件 搭建 Ul 的 开发 殉 式 ， 理 顺 了 UI 的 开发 
过 程 ， 完 美的 将 数据 、 组 件 状 态 和 UI 映射 到 一 起 ， 极 大 地 提高 了 开发 大 型 Web 应 用 的 效率 。 


[0 





评论 





的 








提交 


React 大 大 提高 了 前 端 开发 效率 ! 


steve2017-11-1617.23 


大 爱 React! 


steve*2017-11-16 1722 








图 7-2 










Header 
大 家 一 起 讨论 React 
如 UI 的 复杂 化 ， 其 本 质 司 题 是 如 何 汪 来 于 般 务 抽 负 的 动 可 所 和 用 户 的 交 也 行为 高 的 反 玉 到 复杂 的 用 户 办 上 。Resct 另 甩 由 径 ， 通 过 引入 自 拟 DOM、 闫 态 、 间 向 
娄 据 流 等 设计 理念， 形成 以 组 估 梳 心 ， 用 组 件 江 建 U 的 开发 并 式 ， 理 床 了 U 的 开发 过 程 ， 完 美的 顽 歼 握 、 幅 件 区 态 和 Il 旬 到 一 起 ， 极 大 地 提高 了 开发 大 昏 Web 应 用 的 
允 昌 。 
PostEditor 


CommentList 
React 大 大 提高 了 前 端 开发 效率 ! 


steve"2017-11-16 17:23 


大 爱 React! 
CommentsViely | steve*2077-11-"6 17:22 


图 7-3 


componentDidMount () { 
this .refreshComments () 7 
this .refreshPost () 7 
} 
// 获取 帖子 详情 


第 7 章 路 由 用 React Router 开发 单 页 面 应 用 127 





refreshPost() { 


const postId = this.props.match.params.id; 
get (url.getPostById (postId) ) .then(data => { 
if (!data.error && data.length === 1) { 
this.setstatel({ 
post: data[0] 


// 获取 评论 列表 
refreshComments() { 


const postId = this.props.match.params.id; 


get (url.getCommentList (PostId) ) .then(dqata => { 
if (!data.error) { 
this.setState({ 
comments: data 
Ds 


DD); 
} 


当 PostEditor 对 帖子 做 了 修改 时 ，Post 会 通过 handlePostSave 这 个 方法 将 更 新 的 帖子 同步 到 服 
务 器 。handlePostSave 代码 如 下 : 


handlePostSave (data) { 
const id = this.props.match.params.id; 
this.savePost (id, data); 
} 
// 同步 帖子 的 修改 到 服务 器 
savePost (id, post) { 
put (url.updatePost (id), post) .then(data => { 
if (!data.error) { 
/* 因为 返回 的 帖子 对 象 只 有 author 的 ia 信息 ， 
* 所 有 需要 额外 把 完整 的 author 信息 合并 到 帖子 对 象 中 */ 


const newPost 


{ ...data, author: this.state.post.author }; 


this.setstatel({ 
post: newPost, 


editing: false 
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当 CommentList 中 有 新 的 评论 被 创建 时 ，Post 同样 需要 把 新 评论 同步 到 服务 器 ， 这 一 过 程 通 


过 handleCommentSubmit 方法 实现 : 


handleCommentSubmit (Content) { 
const postId = this.props.match.params.id; 
const comment = { 
author: this.props.userId, 
post: postId, 
content: content 
ys 
this.saveComment (comment); 
} 
// 保存 新 的 评论 到 服务 器 
saveComment (comment) { 
post (url.createComment (), comment) .then (data => { 
if (!data.error) { 


this.refreshComments (); 


1D); 
} 


components/Postjs 的 完整 代码 如 下 : 


import React, { Component } from "react"; 

import PostEditor from "./PostEditor"; 

import PostView from "./PostView"; 

import CommentList from "./CommentList"; 

import { get, put, post } from "../utils/request"; 
import url from "../utils/url"; 


import "./Post.css"; 


class Post extends Component { 
constructor (props) { 
super (props); 
this.state = { 
post: null, 
comments: [], 
editing: false 
Es 
this.handleEditClick = this.handleEditcClick.bind (this); 
this.handleCommentSubmit = this.handleCommentSsubmit.bind(this); 
this.handlePostSave = this.handlePostSave.bind(this); 
this.handlePostCancel = this.handlePostCancel.bind(this); 


this.refreshComments = this.refreshComments.bind(this); 


第 7 章 路 由 用 React Router 开发 单 页 面 应 用 


129 





this.refreshPost = this.refreshPost.bind(this); 


componentDidMount() { 
this.refreshComments (); 
this.refreshPost () 7 


// 获取 帖子 详情 
refreshPost() { 
const postId = this.props.match.params.id; 
get (url.getPostById (PostId) ) .then (data => { 
if (!data.error && data.length === 1) { 
this.setState({ 
post: data[0] 
1); 


Ds 
} 


// 获取 评论 列表 
refreshComments() { 
const postId = this.props.match.params.id; 
get (url.getCommentList (postI1Id)) .then(data => { 
if (!data.error) { 
this.setState({ 
comments: data 
1); 


DD); 
} 


// 让 帖子 处 于 编辑 态 
handleEditclick() { 
this.setState({ 
editing: true 

Ds; 
} 


// 保存 帖子 
handlePostSave (data) { 
const id = this.props.match.params.id; 


this.savePost (id, data); 


} 
// 取消 编辑 帖子 
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handlePostCancel() { 
this .setState({ 
editing: false 
Ds 
} 


// 提交 新 建 的 评论 
handleCommentSubmit (content) { 
const postId = this.props.match.params.id; 
const comment = { 
author: this.props.userId, 
post: postId, 
content: content 
}; 
this.saveComment (comment); 


} 
// 保存 新 的 评论 到 服务 器 


saveComment (comment) { 
post (url.createComment (), comment) .then(data => { 
if (!data.error) { 


this.refreshComments (); 


1D); 
} 


// 同步 帖子 的 修改 到 服务 器 
savePost (id, post) { 
put (url.updatePost (id), post) .then(data => { 
if (!data.error) { 
/* 因为 返回 的 帖子 对 象 只 有 author 的 id 信息 ， 
* 所 有 需要 额外 把 完整 的 author 信息 合并 到 帖子 对 象 中 */ 
const newPost = { ...data, author: this.state.post.author }; 
this.setState({ 
post: newPost, 


editing: false 


render() { 
const { post, comments, editing } = this.state; 
const { userId } = this.props; 


if (!post) { 
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return null; 


} 
const editable = userId === post.author.id; 


return ( 





<div className="post"> 
{editing ? ( 
<PostEditor 
post={post} 
onSave={this.handlePostSave} 
onCancel={this.handlePostCancel} 


Pe 


{/* PostView 负责 展示 某 一 个 帖子 */} 
<PostView 
post={post} 
editable={editable} 
onEditClick={this.handleEditClick} 
iS 
) } 
<CommentList 
comments={comments} 
editable={Boolean (userId) } 
onsubmit={this.handleCommentSubmit} 
FE 
</div> 
); 


export default Post; 


2. CommentList 


CommentList 用 于 显示 评论 列表 (通过 CommentsView) 和 发 表 新 评论 ， 用 户 发 表 的 新 评论 通 
过 调用 父 组 件 Post 的 handleCommentSubmit 方法 保存 到 服务 器 .CommentList 也 是 只 负责 UI 逻辑 。 


components/CommentListjs 的 完整 代码 如 下 : 


import React, { Component } from "react"; 
import CommentsView from "./CommentsView"; 
import { getFormatDate } from "../utils/date"; 


import "./CommentList.css"; 


class CommentList extends Component { 
constructor (props) { 


super (props); 
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this.state 





value: 
}; 
this.handleChange = this.handleChange.bind(this); 
this.handleClick = this.handleClick.bind(this); 
} 


// 处 理 新 评论 内 容 的 变化 
handleChange(e) { 
this.setState({ 
Value: e.target.value 
]) 
} 


// 保存 新 评论 
handleclick(e) { 
const content = this.state.value; 
if (content.length > 0) { 
this.props.onSubmit (this.state.value); 
this.setState({ 
Talues ™” 
1); 
} else { 


alert ("评论 内 容 不 能 为 空 ! ") ; 


render() { 


const { comments, editable } = this.props; 


return ( 
<div className="commentList"> 
<div className="title"> 评 论 </div> 
{/* 只 有 登录 状态 ， 才 允许 新 建 评论 */} 
{editable ? ( 
<div className="editor"> 
<textarea 
placeholder=" 说 说 你 的 看 法 " 
value={this.state.value} 
onChange={this.handleChange} 
#> 
<button onClick={this.handleClick}> 提 交 </button> 
</div> 
和 


<CommentsView comments={comments} /> 
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export default CommentList; 
3. CommentsView 


CommentsView 是 负责 显示 评论 列表 的 最 终 组 件 。components/CommentsViewjs 的 代码 如 下 : 


import React, { Component } from "react"; 
import { getFormatDate } from "../utils/date"; 


import "./CommentsView.css"; 


class CommentsView extends Component { 
render() { 
const { comments } = this.props; 
return ( 
<ul className="commentsView"> 
{comments.map(item => { 
return ( 
<1i key={item.id}> 
<div>{item.content}</div> 
<div className="sub"> 
<span>{item.author.username}</span> 
<span>:</span> 
<span>{getFormatDate (item.updatedAt) }</span> 
</div> 
</1i> 


export default CommentsView; 


7.3 代码 分 片 


默认 情况 下 ， 当 在 项 目 根 路 径 下 执行 bpm run build 时 ，create-react-app 内 部 使 用 webpack 将 
src/ 路 径 下 的 所 有 代码 打包 成 一 个 JS 文件 和 一 个 CSS 文件 。 命 令 执 行 完成 后 ， 控 制 台 有 类 似 如 下 
输出 信息 〈 两 个 文件 名 中 的 哈 希 值 部 分 可 能 会 与 这 里 的 输出 有 所 不 同 ) : 
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$ react-scripts build 
Creating an optimized production build... 


Compiled successfully. 
File sizes after gzip: 


63.09 KB build/static/js/main.8fdd292e.js 
699 B build/static/css/main.58ed99f6.css 


当 项 目 代码 量 不 多 时 ， 把 所 有 代码 打包 到 一 个 文件 的 做 法 并 不 会 有 什么 影响 。 但 是 ， 对 于 一 
个 大 型 应 用 ， 如 果 还 把 所 有 的 代码 都 打包 到 一 个 文件 中 ， 显 然 就 不 合适 了 。 试 想 ， 当 用 户 访问 登录 
页 面 时， 浏览 器 加 载 的 JS 文件 还 包含 其 他 页 面 的 代码 ， 这 会 延长 网 页 的 加 载 时 间 ， 给 用 户 带 来 不 
好 的 体验 。 理 想 情 况 下 ， 当 用 户 访问 一 个 页 面 时 ， 该 页 面 应 该 只 加 载 自己 使 用 到 的 代码 。 解 决 这 个 
问题 的 方案 就 是 代码 分 片 ， 将 JS 代码 分 片 打 包 到 多 个 文件 中 ， 然 后 在 访问 页 面 时 按 需 加 载 。 

create-react-app 支持 通过 动态 import0 的 方式 实现 代码 分 片 。import0 接 收 一 个 模块 的 路 径 作 为 
参数 ， 然 后 返回 一 个 Promise 对 象 ，Promise 对 象 的 值 就 是 待 导入 的 模块 对 象 。 例 如 : 


// moduleA.js 
const moduleA = 'Hello'; 


export { modulea }; 


//App.js 
import React, { Component } from 'react'; 


class App extends Component { 


handleClick = () => { 
// 使 用 import 动态 导入 moduleA.js 
import ('./moduleA') 
.then(({ moduleaA }) => { 
// 使 用 modulea 
]) 
.Catch (err => { 
// 处 理 错误 
]) 2 
]} 


render() { 
return ( 
<div> 
<button onClick={this.handleClick}> 加 载 moduleA</button> 
</div> 
); 
} 
} 


export default App; 
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上 面 的 代码 会 将 moduleAjs 和 它 所 依赖 的 其 他 模块 单独 打包 到 一 个 chunk 文件 中 ， 只 有 当 用 
户 点 击 了 加 载 按钮 ， 才 开始 加 载 这 个 chunk 文件 。 

当 项 目 中 使 用 React Router 时 ， 一 般 会 根据 路 由 信息 将 项 目 代码 分 片 ， 每 个 路 由 依赖 的 代码 单 
独 打包 成 一 个 chunk 文件 。 我 们 创建 一 个 函数 统一 处 理 这 个 逻辑 : 


import React, { Component } from "react"; 


// importcomponent 是 使 用 了 import () 的 函数 
export default function asyncComponent (importComponent) { 
class AsyncComponent extends Component { 
constructor (props) { 
super (props); 
this.state = { 
component: null // 动 态 加 载 的 组 件 
Fa 
} 


componentDidMount() { 
importComponent () .then((mod) => { 
this.setState({ 
// 同时 兼容 Es6 和 commonds 的 模块 


component: mod.default ? mod.default : mod 


render() { 
// 泻 染 动态 加 载 的 组 件 
const C = this.state.component; 
return C ? <C {...this.props} /> : null; 
} 
5 


return AsyncComponent; 


} 


asyncComponent 接收 一 个 函数 参数 importComponent，importComponent 内 通过 import0 语 法 
动态 导入 模块 。 在 AsyncComponent 被 挂 载 后 ，importComponent 就 会 被 调用 ， 进 而 触发 动态 导入 
模块 的 动作 。 

下 面 我 们 利用 asyncComponent 改造 BBS 项 目 ， 使 其 支持 按照 路 由 进行 代码 分 片 。 本 节 项 目 源 
代码 的 目录 为 /chapter-07/bbs-router-code-splitting。 在 App.js 中 ， 删 除 使 用 import 静态 导入 的 Login 
和 Home 组 件 ， 改 为 使 用 asyncComponent 动态 导入 ， 代 码 如 下 : 


import React, { Component } from "Teact"7 


import { BrowserRouter as Router, Route, Switch } from "react-router-dom"; 
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import asyncComponent from "./AsyncComponent"; 


// 通 过 asynccomponent 导入 组 件 ， 创 建 代码 分 片 点 


const RsyncHome = asyncComponent (() => import("./components/Home")); 


const AsyncLogin = asyncComponent (() => import("./components/Login")); 
class App extends Component { 
render() { 
return ( 
<Router> 
<Switch> 
<Route exact path="/" component={AsyncHome} /> 
<Route path="/login" component={AsyncLogin} /> 
<Route path="/posts" component={AsyncHome} /> 
</Switch> 
</Router> 
); 


export default App; 
这 样 ， 只 有 当 路 由 匹配 时 ， 对 应 的 组 件 才 会 被 导入 ， 实 现 按 需 加 载 的 效果 。 同 样 ，Homejs 中 
使 用 的 Route 也 进行 相同 改造 ， 关 键 代 码 如 下 : 


//Home.js 


const AsyncPost = asyncComponent (() => import("./Post")); 
const AsyncPostList = asyncComponent (() => import("./PostList")); 


class Home extends Component { 


/** 省 略 其 余 代码 **/ 


render() { 
const { match, location } = this.props; 
const { username } = this.state; 
return ( 
<div> 
<Header 
username={username} 
onLogout={this.handleLogout} 
location={location} 
js 
<Route 
path={match.url} 


exact 
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render={props => <AsyncPostList username={username} {...props} />} 
Ps 
<Route 
path={“${match.url}/:id} 
render={props => <AsyncPost username={username} {...props} />} 
/> 
</div> 


); 


} 


看 到 这 里 ， 有 些 读者 可 能 会 有 这 样 的 疑问 ， 为 什么 asyncComponent 不 直接 接收 一 个 代表 组 件 
路 径 的 字符 串 作为 参数 ， 然 后 在 AsyncComponent 组 件 内 部 使 用 import0 动 态 导入 该 组 件 呢 ? 这 种 
情况 下 ， 实 现代 码 如 下 : 


export default function asyncComponent (ComponentPath) { 


class AsyncComponent extends Component { 


/** 省 略 其 余 代码 **/ 


componentDidMount() { 
import (ComponentPath) .then((mod) => { 
this.setState({ 
// 同时 兼容 Es6 和 commonJs 的 模块 


component: mod.default ? mod.default : mod 


return AsyncComponent; 


} 


// 使 用 asynccomponent 

const AsyncHome = asyncComponent ("./components/Home"); 

如 上 修改 后 ， 重 新 编译 打包 ， 代 码 并 没有 被 成 功 分 片 ， 控 制 台 上 还 会 有 这 样 一 句 警告 信息 : 
Critical dependency: the request of a dependency is an expression。 这 是 因为 在 使 用 import0 时 , 必须 显 
式 地 声明 要 导入 的 组 件 路 径 , webpack 在 打包 时 , 会 根据 这 些 显 式 的 声明 拆 分 代码 , 否则 , webpack 
无 法 获得 足够 的 关于 拆 分 代码 的 信息 。 

现在 对 改造 后 的 项 目 再 次 执行 npm run build, 将 会 生成 1 个 main.js 文件 和 4 个 chunkjs 文件 。 
每 一 个 import0 语 法 都 会 打包 出 一 个 chunk 文件 ， 项 目 中 共 使 用 了 4 次 import0， 因 此 最 终 有 4 个 
chunkjs 文件 。 控 制 台 有 类 似 如 下 输出 信息 : 


$ react-scripts build 


Creating an optimized production build... 
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Compiled successfully. 
File sizes after gzip: 


59.81 KB build/static/js/main.5l5el2e5.js 

4.41 KB build/static/js/0.f4df54c2.chunk.js 
3.82 KB build/static/js/3.0420c765.chunk.js 
3.56 KB build/static/js/1.67500497.chunk.js 
3.28 KB build/static/js/2.7eabe0af.chunk.js 


这 里 还 有 一 个 需要 注意 的 地 方 ， 打 包 后 没有 单独 的 CSS 文件 了 。 这 是 因为 CSS 样式 被 打包 到 
各 个 chunk 文件 中 ， 当 chunk 文件 被 加 载 执 行 时 ， 会 动态 地 把 CSS 样式 插入 页 面 中 。 如 果 希 望 把 
chunk 中 的 CSS 打包 到 一 个 单独 的 文件 中 , 就 需要 修改 webpack 使 用 的 ExtractTextPlugin 插件 的 配 
置 ,但 create-react-app 并 没有 直接 把 webpack 的 配置 文件 暴露 给 用 pgp 
户 ,为 了 修改 相应 配置 , 需要 将 create-react-app 管理 的 配置 文件 “ 弹 » jest 





射 ” 出 来 ， 在 项 目 根 路 径 下 执行 : eis 
paths.js 
npm run eject polyfills.js 


webpack.config.dev.js 


项 目 中 会 多 出 两 个 文件 夹 : config 和 scripts，scripts 中 包含 项 Wobpacl orn orddje 
目 启动 、 编 译 和 测试 的 脚本 ，config 中 包含 项 目 使 用 的 配置 文件 ， webpackDevServerconfigjs 


webpack 的 配置 文件 就 在 这 个 路 径 下 ， 如 图 7-4 所 示 。 ea 
打包 webpack.config.prod.js， 找 到 配置 ExtractTextPlugin 的 地 i 
方 ， 添 加 allChunks: true 这 项 配置 : buildjs 


startjs 


new ExtractTextPlugin({ testjs 
I 


filename: cssFilename, 


allChunks: true, // 新 加 配置 项 
))， Bs 


» src 








然后 重新 编译 项 目 ， 各 个 chunk 文件 使 用 的 CSS 样式 又 会 统一 打包 到 main.css 中 。 


npm run eject 是 一 个 不 可 逆 操作 ， 一 旦 将 配置 “弹射 ”出 ， 就 不 能 再 回 到 之 前 的 状态 ， 配 
置 的 维护 和 修改 工作 将 全 权 交 给 用 户 。 不 过 ，create-react-app 官方 已 经 计划 在 2.0 版 本 中 


en 添加 allChunks: true 这 一 配置 项 ， 届 时 将 不 再 需要 通过 “弹射 ”的 方式 添加 这 个 配置 。 


7.4 本 章 小 结 


本 章 先 介绍 了 单 页 面 应 用 和 前 端 路 由 的 概念 , 由 此 延伸 到 React Router 这 个 React 技术 栈 中 最 
常用 的 前 端 路 由 解决 方案 。React Router 4 遵循 React 一 切 皆 组 件 的 思想 ， 支 持 在 任意 组 件 中 定义 
路 由 了 Route 组 件 ， 更 加 灵活 的 使 用 方式 也 增加 了 使 用 难度 。 然 后 ， 本 章 通 过 BBS 项 目 展 示 了 React 
Ronuter 在 实际 项 目 中 的 使 用 方式 。 本 章 的 最 后 还 介绍 了 如 何 进行 代码 分 片 ， 代 码 分 片 的 目的 是 实 
现代 码 的 按 需 加 载 ， 提 高 应 用 的 加 载 速度 。 
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React 主要 的 关注 点 是 如 何 创 建 可 复 用 的 视图 层 组 件 , 对 于 组 件 之 间 的 数据 传递 和 状态 管理 并 
没有 给 出 很 好 的 解决 方案 ， 所 以 ， 当 我 们 创建 大 型 Web 应 用 时 ， 只 使 用 React 往往 不 能 高 效 、 清 
晰 地 对 应 用 和 组 件 状 态 进 行 管理 ， 这 时 候 就 需要 引入 额外 的 类 库 完 成 这 项 工作 ，Redux 就 是 其 中 的 
一 个 代表 。Redux 的 思想 继承 自 Facebook 官方 的 Flux 架构 , 但 比 Flux 更 加 简洁 易 用 。 本 章 就 来 介 
绍 一 下 Redux 的 原理 和 使 用 。 


8.1 简 介 


8.1.1 基本 概念 


随 着 单 页 面 应 用 需求 越 来 越 复 杂 ， 应 用 需要 管理 的 状态 也 变 得 越 来 越 多 。 这 里 的 状态 不 仅 包 
括 从 服务 器 端 获取 的 数据 ， 还 包括 本 地 创建 的 数据 ， 同 样 也 包括 反映 UI 状态 的 数据 ， 例 如 当前 路 
由 的 位 置 、 选 中 的 标签 、 弹 出 框 的 控制 等 。Redux 通过 一 系列 约定 的 规范 将 修改 应 用 状态 的 步骤 标 
准 化 ， 让 应 用 状态 的 管理 不 再 错综复杂 ， 而 是 如 同一 根 长 线 般 清晰 。 

下 面 通过 一 个 简单 的 例子 阐述 Redux 的 核心 概念 。 本 章 项 目 源 代码 的 目录 为 /chapter-08/ 
todos-redux。 假 设 我 们 要 开发 一 个 待 办 事项 todos 的 应 用 ， 用 一 个 JavaScript 对 象 描述 这 个 应 用 的 
状态 : 

{ 

todos: [{ 


text: 'Learn React'y 
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} 


completed: true 

}, { 
text: 'Learn Redux', 
completed: false 


}]， 
visibilityFilter: 'SHOW_COMPLETED' 


todos 包含 所 有 的 事项 ， 包 括 已 经 完成 的 和 尚未 完成 的 ， 根 据 completed 属性 区 分 该 事项 是 否 
已 经 完成 ;visibilityFilter 是 一 个 过 滤 条 件 , 表示 当前 界面 上 应 该 显示 哪些 事项 。 这 个 对 象 需要 被 视 
为 只 读 对 象 ， 当 需要 修改 应 用 状态 时 ， 必 须发 送 一 个 action，action 描述 应 用 状态 应 该 如 何 修改 ， 
其 实 action 只 是 一 个 普通 的 JavaScript 对 象 .例如 , 当 新 增 一 个 待 办 事项 时 , 可 以 发 送 下 面 的 action: 


type: 'ADD TODO', text: "Learn MobX' } 


type 代表 action 的 类 型 ， 此 处 ADD_TODO 表示 要 新 增 一 个 待 办 事项 ，text 包含 新 增 事项 的 内 


容 。 类 似 地 ， 如 果 要 让 界面 显示 所 有 的 事项 ， 可 以 发 送 下 面 的 action: 


例如 ， 


type: "SET VISIBILITY FILTER', filter: "SHOW ALL' } 


注意 ，action 的 结构 并 不 是 确定 的 (但 必须 包含 type 字段 )， 不 同 的 人 有 不 同 的 描述 习惯 ， 


可 以 通过 action 描述 新 增 一 个 待 办 事项 : 
type: 'ADD', data: 'Learn MobX' } 


只 要 保证 你 的 程序 知道 如 何 解析 定义 的 action 即 可 。 那 么 ， 如 何 解 析 action 呢 ? Redux 通过 


reducer 解析 action。reducer 是 一 个 普通 的 JavaScript 函数 ， 接 收 action 为 参数 ， 然 后 返回 一 个 新 的 


应 用 


应 用 





状态 state。 例 如 ， 这 里 我 们 定义 一 个 reducer (省 略 处 理 state 的 逻辑 代码 ) : 


function todoApp(state = {}, action) { 
switch (action.type) { 
Case SET VISIBILITY FILTER: 
// return new state 
case ADD_ TODO: 
// return new state 
Case TOGGLE TODO: 
// return new state 
default: 
return state 
' 
} 


todoApp 就 是 管理 应 用 全 局 state 的 reducer，todoApp 每 次 返回 的 state 的 结构 就 是 最 初 定义 的 
状态 的 结构 : 
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visibilityFilter: ... 
} 


这 一 系列 过 程 描述 了 Redux 的 基本 概念 。Redux 的 主要 思想 就 是 描述 应 用 的 状态 如 何 根据 
action 进行 更 新 ，Redux 通过 提供 一 系列 API 将 这 一 主要 思想 的 落地 实施 进行 标准 化 和 规范 化 。 但 
就 Redux 的 使 用 者 而 言 , 编写 的 绝 大 部 分 代码 都 是 普通 的 JavaScript 代码 ， 只 有 在 个 别 地 方 会 用 到 
Redux 的 API 而 已 。 


8.1.2 三 大 原则 
Redux 应 用 需要 遵循 三 大 原则 ， 否 则 程序 很 容易 出 现 难以 察觉 的 问题 。 
1. 唯一 数据 源 


Redux 应 用 只 维护 一 个 全 局 的 状态 对 象 ， 存 储 在 Redux 的 store 中 。 唯 一 数据 源 是 一 种 集中 式 
管理 应 用 状态 的 方式 ， 便 于 监控 任意 时 刻 应 用 的 状态 和 调试 应 用 ， 减 少 出 错 的 可 能 性 。 


2. 保持 应 用 状态 只 i 


在 任何 时 候 都 不 能 直接 修改 应 用 状态 。 当 需要 修改 应 用 状态 时 ， 必 须发 送 一 个 action， 由 这 个 
action 描述 如 何 修改 应 用 状态 。 这 一 看 似 烦 琐 的 修改 状态 的 方式 实际 上 是 Redux 状态 管理 流程 的 核 
心 ， 保 证 了 在 大 型 复杂 应 用 中 状态 管理 的 有 序 进行 。 


3. 应 用 状态 的 改变 通过 纯 函 数 完成 


action 表明 修改 应 用 状态 的 意图 ， 真正 对 应 用 状态 做 修改 的 是 reducer。reducer 必须 是 纯 函 数 ， 
所 以 reducer 在 接收 到 action 时 ， 不 能 直接 修改 原来 的 状态 对 象 ， 而 是 要 创建 一 个 新 的 状态 对 象 
返回 。 





纯 函 数 是 指 满足 以 下 两 个 条 件 的 函数 : 


注 意 (1) 对 于 同样 的 参数 值 ， 函 数 的 返回 结果 总 是 相同 的 ， 即 该 函数 结果 不 依赖 任何 在 程 
序 执行 过 程 中 可 能 改变 的 变量 。 
(2) 函数 的 执行 不 会 产生 副作用 ， 例 如 修改 外 部 对 象 或 输出 到 IO 设备。 


8.2 主要 组 成 


通过 前 面 的 介绍 可 以 发 现 Redux 应 用 的 主要 组 成 有 action、reducer 和 store。 下 面 借助 todos 
这 个 示例 详细 地 绍 这 三 部 分 。 


8.2.1 action 


action 是 Redux 中 信息 的 载体 ,是 store 唯一 的 信息 来 源 。 把 action 发 送 给 store 必须 通过 store 
的 dispatch 方法 。action 是 普通 的 JavaScript 对 象 ， 但 每 个 action 必须 有 一 个 type 属性 描述 action 
的 类 型 ，type 一 般 被 定义 为 字符 串 常量 。 除 了 type 属性 外 ，action 的 结构 完全 由 自己 决定 ， 但 应 该 
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确保 action 的 结构 能 清晰 地 描述 实际 业务 场景 。 一 般 通 过 action creator 创建 action，action creator 
是 返回 action 的 函数 。 例 如 ， 下 面 是 一 个 新 增 待 办 事项 的 action creator: 


function addTodo (text) { 





return { 
type: 'ADD TODO', 
text 


} 


todos 应 用 涉及 的 操作 有 新 增 待 办 事项 、 修 改 待 办 事项 的 状态 (已 完成 /未 完成 ) 、 筛 选 当前 显 
示 的 待 办 事项 列表 。 对 应 的 完整 action creator 如 下 : 


// actions.js 


// action types 


export const ADD TODO = 'ADD TODO' 
export const TOGGLE TODO = 'TOGGLE TODO' 
export const SET VISIBILITY FILTER = "SET VISIBILITY FILTER' 


// 筛选 待 办 事项 列表 的 条 件 

export const VisibilityFilters = { 
SHOW_ALL: "SHOW ALL', 
SHOW_COMPLETED: 'SHOW_ COMPLETED', 
SHOW_ACTIVE: 'SHOW_ACTIVE" 

} 


// action creators 

// 新 增 待 办 事项 

export function addTodo(text) { 
return { type: ADD_ TODO, text } 

} 


// 修改 某 个 待 办 事项 的 状态 ，index 是 待 办 事项 在 todos 数组 中 的 位 置 索引 


export function toggleTodo (index) { 
return { type: TOGGLE TODO, index } 
} 


// 第 选 当前 显示 的 待 办 事项 列表 

export function setVisibilityFilter(filter) { 
return { type: SET VISIBILITY FILTER, filter } 

} 


8.2.2 reducer 


action 用 于 描述 应 用 发 生 了 什么 操作 , reducer 则 根据 action 做 出 响应 , 决定 如 何 修改 应 用 的 状 
态 state。 既 然 是 修改 state， 那 么 就 应 该 在 编写 reducer 前 设计 好 state。state 既 可 以 包含 服务 器 端 获 
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取 的 数据 ， 也 可 以 包含 UI 状态 ， 前 面 已 经 设计 了 todos 应 用 的 state: 


{ 
todos: [{ 
text: 'Learn React', 
completed: true 
}j，1{ 
text: 'Learn Redux'v 


completed: false 


}]， 
visibilityFilter: "SHOW_COMPLETED" 
} 


有 了 state， 我 们 再 为 state 编写 reducer。reducer 是 一 个 纯 函 数 ， 它 接收 两 个 参数 ， 当 前 的 state 
和 action， 返 回 新 的 state。reducer 函数 签名 如 下 : 


(previousstate, action) => newState 


我 们 先 来 创建 一 个 最 基本 的 reducer: 


import { VisibilityFilters } from './actions' 


const initialState = { 
todos: [], 
visibilityFilter: VisibilityFilters.SHOW ALL 


// reducer 

function todoApp(state = initialState, action) { 
return state 

} 


todoApp 这 个 reducer 不 做 任何 事情 ， 对 于 任意 action 做 出 的 响应 都 是 直接 返回 前 一 个 state。 
这 里 需要 注意 state 初始 值 的 设置 ， 当 todoApp 第 一 次 被 调用 时 ，state 等 于 undefined， 这 时 会 用 
initialState 初始 化 state。 现 在 为 todoApp 添加 处 理 type 等 于 SET_VISIBILITY_FILTER 的 action， 
要 做 的 事情 是 改变 state 的 visibilityFilter: 
function todoapp (state = initialstate, action) { 
switch (action.type) { 
Case SET VISIBILITY FILTER: 
return { sastate, visibilityEFilters action. filter } 
default: 


return state 


4 


注意 , 这 里 使 用 ES6 的 扩展 运算 符 (…) 创建 新 的 state 对 象 ， 避 免 直接 修改 之 前 的 state 对 象 。 
还 有 一 种 常见 的 写法 是 使 用 ES6 的 Objectassign0 函 数 : 
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function todoRApp (state = initialState, action) { 
switch (action.type) { 
Case SET VISIBILITY FILTER: 
return Object.assign({}, state, { 
visibilityFilter: action.filter 
}) 
default: 


return state 


} 
下 面 再 来 处 理 另外 两 个 action， 同 样 需要 保证 每 次 返回 的 state 对 象 都 是 一 个 新 的 对 象 : 


function todoRApp (state = initialState，action) { 
Switch (action.type) { 
Case SET VISIBILITY FILTER: 
return { ...state, visibilityFilter: action.filter } 
// 新 增 待 办 事项 
case ADD TODO: 
// 使 用 了 Es6 的 扩展 语法 
return { ...state, 
todos: [ 
...State.todos, 
{ 
text: action.text, 


completed: false 


} 
// 修改 待 办 事项 的 状态 (已 完成 /未 完成 ) 
case TOGGLE TODO: 
return { ...state, 
todos: state.todos.map((todo, index) => { 
if (index === action.index) { 
return { ...todo, completed: !todo.completed } 
} 
return todo 
}) 
} 
default: 


return state 
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当前 ， 我 们 使 用 todoApp 一 个 reducer 处 理 所 有 的 action， 当 应 用 变 得 复杂 时 ， 这 个 reducer 也 
会 逐渐 变 复杂 ， 这 时 ， 一 般 会 拆 分 出 多 个 reducer， 每 个 reducer 处 理 state 中 的 部 分 状态 。 例 如 ， 
这 里 可 以 拆 分 出 todos 和 visibilityFilter 两 个 reducer， 分 别处 理 state 的 todos 和 visibilityFilter 两 个 
子 状态 : 


// 处 理 todos 的 reducer 


function todos (state = [], action) { 





switch (action.type) { 
case 'ADD TODO': 
return state.concat([{ text: action.text, completed: false }]) 
case 'TOGGLE TODO': 
return state.mapl( 
(todo, index) => 
action.index === index 
? { ...todo, completed: !todo.completed } 
: todo 
) 
default: 


return state 


} 


// 处 理 visibilityFilter 的 reducer 
function visibilityFilter(state = 'SHOW ALL', action) { 
switch (action.type) { 
Case SET VISIBILITY FILTER: 
return action.filter 
default: 
return state 


} 
todoApp 简化 为 : 


function todoapp (state = {}, action) { 
return { 
todos: todos(state.todos, action), 


visibilityFilter: visibilityFilter(state.visibilityFilter, action) 


} 
注意 ， 每 个 拆 分 的 reducer 只 接收 它 负责 的 state 中 的 部 分 属性 ， 而 不 再 是 完整 的 state 对 象 。 
todos 接收 state.todos，visibilityFilter 接收 state.visibilityFilter。 这 样 ， 当 应 用 较 复杂 时 ， 就 可 以 拆 分 


出 多 个 reducer 保存 到 独立 的 文件 中 。 
Redux 还 提供 了 一 个 combineReducers 函数 ， 用 于 合并 多 个 reducer。 使 用 combineReducers， 


todoApp 可 以 改写 如 下 : 
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import { combineReducers } from 'redux' 


const todoApp = combineReducers ({ 
todos, 
visibilityFilter 

}) 


它 等 价 于 : 


function todoRApp (state = {}, action) { 
return { 
todos: todos(state.todos, action), 
VisibilityFilter: visibilityFilter(state.visibilityFilter, action) 
} 
. 


还 可 以 为 combineReducers 接收 的 参数 对 象 指定 和 reducer 的 函数 名 不 同 的 key 值 : 


const reducer = combineReducers({ 
a: doSomethingWithAa, 
b: processB, 
避让 


} ) 
它 等 价 于 : 


function reducer (state = {}, action) { 
return { 
a: doSomethingWithA (state.a, action), 
b: processB(state.b, action), 


c: c(state.c, action) 
} 


可 见 ，combineReducers 传递 给 每 个 reducer 的 state 中 的 属性 取决 于 它 的 参数 对 象 的 key 值 。 
8.2.3 store 


store 是 Redux 中 的 一 个 对 象 ， 也 是 action 和 reducer 之 间 的 桥梁 。store 主要 负责 以 下 几 个 
工作 : 


(1) 保存 应 用 状态 。 

(2) 通过 方法 getState0 访 问 应 用 状态 。 

(3) 通过 方法 dispatch(action) 发 送 更 新 状态 的 意图 。 

(4) 通过 方法 subscribe(listener) 注 册 监 听 函 数 、 监 听 应 用 状态 的 改变 。 


一 个 Redux 应 用 中 只 有 一 个 store，store 保存 了 唯一 数据 源 。store 通过 createStore0 函 数 创 建 ， 
创建 时 需要 传递 reducer 作为 参数 ， 创 建 todos 应 用 的 store 的 代码 如 下 : 
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import { createStore } from '‘'redux' 


import todoApp from './reducers' 


let store = createStore (todoApp) 
创建 store 时 还 可 以 设置 应 用 的 初始 状态 : 
// initialstate 代表 初始 状态 


let store = createStore(todoApp, initialstate) 


除了 可 以 在 创建 store 时 设置 应 用 的 初始 状态 外 ， 还 可 以 在 创建 reducer 时 设置 应 用 的 初始 状 
态 ， 例 如 : 


// 初始 状态 是 一 个 空 数组 

function todos (state = []，action) { 
FE 

} 


// 初始 状态 等 于 SHOW_ALL 

function visibilityFilter(state = 'SHOW ALL', action) { 
leee 

} 


todos 设置 的 初始 状态 是 state = []，visibilityFilter 设置 的 初始 状态 是 state = 'SHOW_ALL'， 这 
样 ， 当 把 这 两 个 reducer 合并 成 一 个 reducer 时 ， 两 个 reducer 的 初始 状态 就 构成 了 整个 应 用 的 初始 
状态 : 
{ 
todos: [], 
visibilityFilter: 'SHOW ALL' 
} 
store 创建 完成 后 ， 就 可 以 通过 getState0 获 取 当 前 应 用 的 状态 state: 


const state = Store.getState() 


当 需 要 修改 state 时 ， 通 过 store 的 dispatch 方法 发 送 action。 例 如 ， 发 送 一 个 新 增 待 办 事项 的 
action: 
// 定义 action 
Eunction addTodo (text) { 
return {type: "ADD TODO', text} 
} 


// 发 送 action 


store.dispatch (addTodo('Learn about actions')) 
当 todoApp 这 个 reducer 处 理 完成 addTodo 这 个 action 时 ， 应 用 的 状态 会 被 更 新 ， 此 时 通过 


store.getState0 可 以 得 到 最 新 的 应 用 状态 。 为 了 能 准确 知道 应 用 状态 更 新 的 时 间 ， 需 要 向 store 注册 
一 个 监听 函数 : 
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let unsubscribe = store.subscribe(() => 
console.1log(store-getState () ) 
) 


这 样 ， 每 当 应 用 状态 更 新 时 ， 最 新 的 应 用 状态 就 会 被 打印 出 来 。 当 需要 取消 监听 时 ， 直 接 调 
用 store.subscribe 返回 的 函数 即 可 : 


unsubscribe() 
下 面 再 来 总 结 一 下 Redux 的 数据 流 过 程 。 


(1) 调用 store.dispatch(action) 。 一 个 action 是 一 个 用 于 描述 “发 生 了 什么 ”的 对 象 。 
store.dispatch(action) 可 以 在 应 用 的 任何 地 方 调用 ， 包 括 组 件 、XHR 的 回调 ， 甚 至 在 定时 器 中 。 

(2)Redux 的 store 调用 reducer 函数 。store 传递 两 个 参数 给 reducer: 当前 应 用 的 状态 和 action。 
reducer 必须 是 一 个 纯 函数 ， 它 的 唯一 职责 是 计算 下 一 个 应 用 的 状态 。 

(3) 根 reducer 会 把 多 个 子 reducer 的 返回 结果 组 合成 最 终 的 应 用 状态 。 根 reducer 的 构建 形 
式 完 全 取决 于 用 户 。Redux 提供 了 combineReducers， 方便 把 多 个 拆 分 的 子 reducer 组 合 到 一 起 , 但 
完全 可 以 不 使 用 它 。 当 使 用 combineReducers 时 ，action 会 传递 给 每 一 个 子 reducer 处 理 , 子 reducer 
处 理 后 的 结果 会 合并 成 最 终 的 应 用 状态 。 

(4) Redux 的 store 保存 根 reducer 返回 的 完整 应 用 状态 。 此 时 ， 应 用 状态 才 完 成 更 新 。 如 果 
需要 根据 应 用 状态 进行 更 新 ， 那 么 这 就 是 更 新 UI 的 时 机 。 对 于 React 应 用 而 言 ， 可 以 在 这 个 时 
候 调 用 组 件 的 setState 方法 ， 根 据 新 的 应 用 状态 更 新 UI。 


8.3 在 React 中 使 用 Redux 


8.3.1 安装 react-redux 


首先 需要 强调 ，Redux 和 React 并 无 直接 关联 ，Redux 可 以 和 很 多 库 一 起 使 用 。 为 了 方便 在 
React 中 使 用 Redux， 我 们 需要 使 用 react-redux 这 个 库 。 这 个 库 并 不 包含 在 Redux 中 ， 所 以 需要 单 
独 安 装 : 


npm install react-redux 


8.3.2 ”展示 组 件 和 容器 组 件 


根据 组 件 意图 的 不 同 ， 可 以 将 组 件 划分 为 两 类 : 展示 组 件 (presentational components) 和 容器 
组 件 (container components) i 

展示 组 件 负责 应 用 的 UI 展示 (how things look) ， 也 就 是 组 件 如 何 泻 染 ， 具 有 很 强 的 内 聚 性 。 
展示 组 件 不 关心 泻 染 时 使 用 的 数据 是 如 何 获取 到 的 , 它 只 要 知道 有 了 这 些 数据 后 , 组 件 应 该 如 何 泻 
染 就 足够 了 。 数 据 如 何 获取 是 容器 组 件 负责 的 事情 。 

容器 组 件 负责 应 用 逻辑 的 处 理 (how things work) ， 如 发 送 网 络 请 求 、 处 理 返 回 数据 、 将 处 理 
过 的 数据 传递 给 展示 组 件 使 用 等 。 容 器 组 件 还 提供 修改 源 数据 的 方法 ， 通 过 展示 组 件 的 props 传递 
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给 展示 组 件 , 当 展 示 组 件 的 状态 变更 引起 源 数 据 变化 时 , 展示 组 件 通 过 调用 容器 组 件 提供 的 方法 同 

展示 组 件 和 容器 组 件 可 以 自由 嵌 套 ， 一 个 容器 组 件 可 以 包含 多 个 展示 组 件 和 其 他 的 容器 组 件 ; 
一 个 展示 组 件 也 可 以 包含 容器 组 件 和 其 他 的 展示 组 件 。 这 样 的 分 工 可 以 使 与 UI 渲染 无 直接 关系 的 
业务 逻辑 由 容器 组 件 集中 负责 ， 展 示 组 件 只 关注 UI 的 泻 染 逻 辑 ， 从 而 使 展示 组 件 更 容易 被 复 用 。 
对 于 非常 简单 的 页 面 , 一 般 只 需要 一 个 容器 组 件 就 足够 了 ; 但 对 于 复杂 的 页 面 , 往往 需要 多 个 容器 
组 件 , 否则 所 有 的 业务 逻辑 都 在 一 个 容器 组 件 中 处 理 的 话 , 会 导致 这 个 组 件 非常 复杂 ， 同 时 这 个 组 
件 获取 到 的 源 数 据 可 能 需要 经 过 很 多 层 组 件 props 的 传递 才能 到 达 最 终 使 用 的 展示 组 件 。 


【人 展示 组 件 和 容器 组 件 容易 和 2.2.4 小 节 介绍 的 无 状态 组 件 和 有 状态 组 件 混淆 这 两 组 概 

念 对 组 件 的 划分 依据 是 不 同 的 。 展 示 组 件 和 容器 组 件 是 根据 组 件 的 意图 划分 组 件 ， 无 
状态 组 件 和 有 状态 组 件 是 根据 组 件 内 部 是 否 使 用 state 划分 组 件 。 不 过 通常 情况 下 ， 展 
示 组 件 是 通过 无 状态 组 件 来 实现 的 ， 容 器 组 件 是 通过 有 状态 组 件 来 实现 的 ， 但 是 展示 
组 件 也 可 以 是 有 状态 组 件 ， 容 器 组 件 也 可 以 是 无 状态 组 件 。 


注 意 


8.3.3 connect 


react-redux 提供 了 一 个 connect 函数 , 用 于 把 React 组 件 和 Redux 的 store 连接 起 来 ， 生 成 一 个 
容器 组 件 ， 负 责 数据 管理 和 业务 逻辑 ， 代 码 如 下 : 


import { connect } from 'react-redux' 


import TodoList from './TodoList' 


const VisibleTodoList = connect () (TodoList) 


这 里 创建 了 一 个 容器 组 件 VisibleTodoList， 可 以 把 组 件 TodoList 和 Redux 连接 起 来 。 但 是 ， 
这 个 VisibleTodoList 只 是 一 个 空 壳 ， 并 没有 负责 任何 真正 的 业务 逻辑 。 根 据 Redux 的 数据 流 过 程 ， 
VisibleTodoList 需要 承担 两 个 工作 : 


(1) 从 Redux 的 store 中 获取 展示 组 件 所 需 的 应 用 状态 。 
(2) 把 展示 组 件 的 状态 变化 同步 到 Redux 的 store 中 。 


通过 为 connect 传递 两 个 参数 可 以 让 VisibleTodoList 具备 这 两 个 功能 : 


import { connect } from 'react-redux' 


import TodoList from './TodoList' 


const VisibleTodoList = connect( 
mapStateToProps 
mapDispatchToProps 

) (TodoList) 


mapStateToProps 和 mapDispatchToProps 的 类 型 都 是 函数 , 前 者 负责 从 全 局 应 用 状态 state 中 取 
出 所 需 数据 ， 映 射 到 展示 组 件 的 props， 后 者 负责 把 需要 用 到 的 action 映射 到 展示 组 件 的 props 上 。 
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8.3.4 mapStateToProps 


mapStateToProps 是 一 个 函数 ， 从 名 字 就 可 以 看 出 ， 它 的 作用 是 把 state 转换 成 props。state 就 
是 Redux store 中 保存 的 应 用 状态 ， 它 会 作为 参数 传递 给 mapStateToProps，props 就 是 被 连接 的 展 
示 组 件 的 props。 例 如 ，VisibleTodoList 需要 根据 state 中 的 todos 和 visibilityFilter 两 个 数据 过 滤 出 
传递 给 TodoList 的 待 办 事项 数据 : 


function getVisibleTodos (todos, filter) { 
switch (filter) { 
case "SHOW ALL': 
return todos 
case 'SHOW COMPLETED': 
return todos.filter(t => t.completed) 
case "SHOW ACTIVE': 
return todos .filter(t => !t.completed) 
} 
} 


function mapStateToProps (state) { 
return { 
todos: getVisibleTodos (state.todos, state.visibilityFilter) 
} 
} 


每 当 store 中 的 state 更 新 时 ,mapStateToProps 就 会 重新 执行 ,重新 计算 传递 给 展示 组 件 的 props， 
从 而 触发 组 件 的 重新 泻 染 。 


store 中 的 state 更 新 一 定 会 导致 mapStateToProps 重新 执行 ,但 不 一 定 会 触发 组 件 render 
方法 的 重新 执行 。 如 果 mapStateToProps 新 返回 的 对 象 和 之 前 的 对 象 浅 比较 ( shallow 
comparison ) 相等 ， 组 件 的 shouldComponentUpdate 方法 就 会 返回 false， 组 件 的 render 
方法 也 就 不 会 被 再 次 触发 。 这 是 react-redux 库 的 一 个 重要 优化 。 


注意 


connect 可 以 省 略 mapStateToProps 参数 ， 这 样 state 的 更 新 就 不 会 引起 组 件 的 重新 泻 染 。 
mapStateToProps 除了 接收 state 参数 外 , 还 可 以 使 用 第 二 个 参数 , 代表 容器 组 件 的 props 对 象 ， 
例如 : 


// ownProps 是 组 件 的 props 对 象 

function mapStateToProps (state, ownProps) { 
//... 

} 


8.3.5 mapDispatchToProps 
容器 组 件 除了 可 以 从 state 中 读 取 数 据 外 ， 还 可 以 发 送 action 更 新 state， 这 就 依赖 于 connect 
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的 第 二 个 参数 mapDispatchToProps。mapDispatchToProps 接收 store.dispatch 方法 作为 参数 ,返回 展 
示 组 件 用 来 修改 state 的 函数 ， 例 如 : 


// toggleTodo (id) 返回 一 个 action 
Eunction toggleTodo (idq) { 

return { type: "TOGGLE TODO', id } 
} 


function mapDispatchToProps (dispatch) { 
return { 
onTodoClick: function(id) { 
dispatch (toggleTodo (id)) 
} 
} 
} 


这 样 ， 展 示 组 件 内 就 可 以 调用 this.props.onTodoClick(id) 发 送 修 改 待 办 事项 状态 的 action 了 。 
另外 ， 与 mapStateToProps 相同 ，mapDispatchToProps 也 支持 第 二 个 参数 ， 代 表 容 器 组 件 的 props。 


8.3.6 ”Provider 组 件 


通过 connect 函数 创建 出 容器 组 件 ， 但 这 个 容器 组 件 是 如 何 获 取 到 Redux 的 store? react-redux 
提供 了 一 个 Provider 组 件 , Provider 的 部 分 示意 代码 如 下 (为 了 方便 理解 , 这 里 的 代码 和 react-redux 
中 的 代码 并 不 完全 一 致 ) : 


class Provider extends Component 1{ 
getchildContext() { 
return { 
store: this.props.store 
}; 
} 


render() { 
return this.props.children; 
} 
. 


Provider.childContextTypes = { 

store: React.PropTypes.object 

} 

Provider 组 件 需 要 接收 一 个 store 属性 ， 然 后 把 store 属性 保存 到 context (如果 忘记 context 的 
用 法 ， 可 参考 4.3 节 组 件 通信 ) 。Provider 组 件 正 是 通过 context 把 store 传递 给 子 组 件 的 ， 所 以 使 
用 Provider 组 件 时 , 一 般 把 它 作为 根 组 件 , 这 样 内 层 的 任意 组 件 才 可 以 从 context 中 获取 store 对 象 ， 
代码 如 下 : 
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import { createStore } from '‘'redux' 
import { Provider } from 'react-redux' 
import todoApp from './reducers' 


import App from './components/App' 
let store = createStore (todoApp); 


render( 
<Provider store={store}> 
<App /> 
</Provider>, 
document .getElementById('root') 
) 


8.4 中 间 件 与 异步 操作 


8.4.1 中 间 件 


中 间 件 (Middleware) 的 概念 常用 于 Web 服务 器 框架 中 ， 例 如 Nodejs 的 Web 框架 Express， 
代表 处 理 请 求 的 通用 逻辑 代码 ， 一 个 请 求 在 经 历 中 间 件 的 处 理 后 ， 才 能 到 达 业 务 罗 辑 代码 层 。 多 个 
中 间 件 可 以 串联 起 来 使 用 ， 前 一 个 中 间 件 的 输出 是 下 一 个 中 间 件 的 输入 ， 整 个 处 理 过 程 就 如 同 “ 管 
道 ” 一 般 ， 如 图 8-1 所 示 。 


Request mp EE Le 中 间 件 2 中 间 件 3 业务 逻辑 层 


图 8-1 


Redux 的 中 间 件 概念 与 此 类 似 ，Redux 的 action 可 类 比 Web 框架 收 到 的 请 求 ，reducer 可 类 比 
Web 框架 的 业务 逻辑 层 ， 因 此 ，Redux 的 中 间 件 代表 action 在 到 达 reducer 前 经 过 的 处 理 程序 。 实 
际 上 ， 一 个 Redux 中 间 件 就 是 一 个 函数 。Redux 中 间 件 增强 了 store 的 功能 ， 我 们 可 以 利用 中 间 件 
为 action 添加 一 些 通用 功能 ， 例 如 日 志 输出 、 异 常 捕获 等 。 我 们 可 以 通过 改造 store.dispatch 增加 日 
志 输 出 的 功能 : 


let next = store.dispatch 

store.dispatch = function dispatchAndLog(action) { 
console.log('dispatching', action) 
let result = next (action) 
console.log('next state', store.getstate()) 
return result 


} 


上 面 的 代码 重新 定义 了 store.dispatch, 在 发 送 action 前 后 都 添加 了 日 志 输 出 ,这 就 是 中 间 件 的 
雏形 ， 对 store.dispatch 方法 进行 了 改造 ， 在 发 出 action 和 执行 reducer 这 两 步 之 间 添 加 其 他 功能 。 
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注意 ， 实 际 的 中 间 件 实现 方式 要 远 比 上 面 的 示例 复杂 ， 本 书 不 涉及 这 块 内 容 。 实 际 项 目 中 ， 往 往 是 
直接 使 用 别人 写 好 的 中 间 件 。 例 如 ， 上 面 介绍 的 日 志 输 出 功能 就 可 以 使 用 专门 的 日 志 中 间 件 
redux-logger (https://github.com/evgenyrodionov/redux-logger) 。 为 store 添加 中 间 件 支持 的 代码 如 下 : 


import { applyMiddleware, createStore } from 'redux'; 
import logger from 'redux-logger'; 


import reducer from './reducers'; 


const store = CreateStore( 
reducer, 
applyMiddleware (logger) 
ja 
上 面 的 代码 先 从 redux-logger 中 引入 日 志 中 间 件 logger， 然 后 将 它 放 入 applyMiddleware 方法 
中 并 传 给 createStore， 完 成 store.dispatch 功能 的 加 强 。 下 面 来 看 一 下 applyMiddleware 这 个 函数 做 
了 些 什么 ， 代 码 如 下 : 


import compose from '!./compose' 


export default function applyMiddleware(...middlewares) { 
return (createStore) => (...args) => { 
Const store = createStore(...args) 
let dispatch = store.dispatch 


let chain = [] 


const middlewareAPI = { 

getstate: store.getstate, 

dispatch: (...args) => dispatch(...args) 
} 


chain = middlewares.map (middleware => middleware (middlewareAPI)) 


dispatch = compose(...chain) (store.dispatch) 


return { 
...Sstore, 
dispatch 
} 


} 


要 想 完全 理解 这 段 源码 并 不 容易 ， 建 议 读 者 先 把 握 主 线 逻 辑 : applyMiddleware 把 接收 到 的 中 
间 件 放 入 数组 chain 中 ， 然 后 通过 compose(...chain)(store.dispatcb) 定 义 加 强 版 的 dispatch 方法 ， 
compose 是 一 个 工具 函数 ，compose(f g.D) 等 价 于 (...args)=> f(g(h(args)))。 男 外 需要 注意 ,每 一 个 中 
间 件 都 接收 一 个 包含 getState 和 dispatch 的 参数 对 象 ， 在 利用 中 间 件 执行 异步 操作 时 ， 将 会 使 用 到 
这 两 个 方法 。 
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8.4.2 异步 操作 


异步 操作 在 Web 应 用 中 是 不 可 缺少 的 ， 其 中 最 常见 的 异步 操作 是 向 服务 器 请 求 数据 。 目 前 ， 
我 们 介绍 的 Redux 的 工作 流 是 : 发 送 action, reducer 立即 处 理 收 到 的 action, reducer 返回 新 的 state。 
这 个 流程 并 不 涉及 异步 操作 ，Redux 中 处 理 异 步 操作 必须 借助 中 间 件 的 帮助 。 

redux-thunk (https://github.com/gaearon/redux-thunk) 是 处 理 异步 操作 最 常用 的 中 间 件 。 使 用 
redux-thunk 的 代码 如 下 : 


import { createStore, applyMiddleware } from 'redux'; 
import thunk from 'redux-thunk'; 


import reducer from './reducers'; 


const store = createstorel( 
reducer, 
applyMiddleware (thunk) 
); 


现在 定义 一 个 异步 action 模拟 向 服务 器 请 求 数 据 : 
// 异步 action 


function getData (url){ 
return function (dispatch) { 
return fetch (url) 
.thenl( 
response => response.json(), 
error => console.log('An error occured.', error) 
) 
.then(json => 
dispatch({type:'RECEIVE DATA', data: json}) 
) 
} 
} 


发 送 这 个 action: 

store.dispatch (getData ("http://xxx")); 

不 使 用 redux-thunk 中 间 件 时 ， 上面 的 代码 会 报错 , 因为 store.dispatch 只 能 接收 普通 JavaScript 
对 象 代表 的 action， 现 在 使 用 redux-thunk，store.dispatch 就 能 接收 函数 作为 参数 了 。 异 步 action 会 
先 经 过 redux-thunk 的 处 理 , 当 请 求 返 回 后 , 再 次 发 送 一 个 action: dispatch({type:RECEIVE_DATA', 
json})， 把 返回 的 数据 发 送出 去 ， 这 时 的 action 就 是 一 个 普通 的 JavaScript 对 象 了 ， 处 理 流程 也 和 
不 使 用 中 间 件 的 流程 一 样 。 

在 实际 项 目 中 ， 处 理 一 个 网 络 请 求 往往 会 使 用 三 个 action， 分别 表 示 请 求 开始 、 请 求 成 功 和 请 
求 失败 ， 例 如 : 
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{ type: 'FETCH DATA REQUEST' } 
{ type: 'FETCH DATA SUCCESS', data: { ... } } 
{ type: 'FETCH DATA FAILURE', error: 'Oops' } 


使 用 这 三 个 action 改写 上 面 的 代码 : 


// 异步 action 
function getData (url){ 
return function (dispatch) { 
dispatch({type:'FETCH DATA REQUEST'}); 
return fetch(url) 
.then( 
response => response.json(), 
error => { 
console.log('An error occured.', error); 
dispatch({type:'FETCH DATA FAILURE', error}); 


} 
) 
.then(json => 

dispatch({type:'FETCH DATA SUCCESS', data: json}); 
) 


} 


这 样 ， 应 用 就 可 以 根据 请 求 所 处 的 阶段 显示 不 同 的 UI， 例 如 控制 Loading 效果 。 
除了 redux-thunk 外 ,常用 于 处 理 异步 操作 的 中 间 件 还 有 redux-promise(https://github.com/acdlite 
redux-promise) 、redux-saga (https://github.com/redux-saga/redux-saga) 等 ， 本 书 不 再 展开 介绍 。 


8.5 本 章 小 结 


本 章 详细 介绍 了 Redux 架构 以 及 Redux 各 组 成 部 分 (action、reducer、store) 的 使 用 。 在 React 
项 目 中 使 用 Redux 需要 借助 react-redux， 它 可 以 方便 地 将 React 组 件 和 Redux 的 store 连接 。 中 间 
件 是 Redux 的 一 大 利器 ，Redux 中 执行 异步 操作 就 是 通过 引入 中 间 件 实现 的 。 

下 一 章 ， 我 们 将 在 实战 项 目 中 使 用 Redux。 





Redux 项 目 实战 


在 学 习 了 第 8 章 Redux 的 基础 知识 后 ， 当 面 对 真 实 项 目 时 ， 相 信 很 多 读者 还 是 无 从 下 手 ， 不 
知道 该 如 何 使 用 Redux。 这 是 因为 Redux 本 身 的 抽象 程度 很 高 ， 只 关注 最 核心 的 状态 管理 功能 ， 至 
于 具体 在 项 目 中 如 何 使 用 ,Redux 更 多 的 是 把 这 个 灵活 度 交 给 使 用 者 , 但 这 也 给 很 多 初学 者 带 来 困 
惑 。 本 章 将 结合 笔者 自身 的 实践 经 验 ， 从 组 织 项 目 结构 、 设 计 应 用 state 和 设计 Redux 模块 三 方面 
介绍 如 何在 真实 项 目 中 使 用 Redux。 但 请 注意 ， 本 章 介绍 的 Redux 并 不 是 唯一 的 使 用 方式 ， 只 是 笔 
者 推荐 的 其 中 一 种 使 用 方式 。 本 章 最 后 介绍 经 常 和 Redux 一 起 使 用 的 另外 两 个 库 : Immutable.js 和 
Reselect， 它 们 可 以 提高 Redux 的 性 能 。 

本 章 依 然 使 用 BBS 项 目 作 为 示例 。 本 章 项 目的 源码 目录 为 : /chapter-09/bbs-redux。 


9.1 组 织 项 目 结 构 


关于 如 何 组 织 ReacttRedux 的 项 目 结构 一 直 有 多 种 声音 ， 目 前 主流 的 方案 有 三 种 : 按照 类 型 、 
按照 页 面 功能 和 Ducks。 


1. 按照 类 型 


这 里 的 类 型 指 的 是 一 个 文件 在 项 目 中 充当 的 角色 类 型 ， 即 这 个 文件 是 一 个 component (展示 组 
件 ) 还 是 一 个 container (容器 组 件 ) ， 或 者 是 一 个 reducer 等 ， 充 当 component、container、action、 
reducer 等 不 同 角色 的 文件 分 别 放 在 不 同 的 文件 夹 下 ， 这 也 是 Redux 官方 网 站 示例 所 采用 的 项 目 结 
构 。 这 种 结构 如 下 : 
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actions/ 
actionl.js 
action2.js 

components/ 
component1.js 
component2.js 
component3.js 

constainers/ 
constainerl.js 


constainer2.js 


uu 


reducers/ 
reducerl.js 
reducer2.js 


index.js 


使 用 这 种 结构 组 织 项 目 ， 每 当 增 加 一 个 新 功能 时 ， 需 要 在 containers 和 components 文件 夹 下 
增加 这 个 功能 需要 的 组 件 ， 还 要 在 actions 和 reducers 文件 夹 下 分 别 添加 Redux 管理 这 个 功能 使 用 
到 的 action 和 reducer， 如 果 action type 放 在 另 一 个 文件 夹 ， 还 需要 在 这 个 文件 夹 下 增加 新 的 action 
type。 所 以 ， 开 发 一 个 功能 时 ， 需 要 频繁 地 切换 路 径 以 修改 不 同 的 文件 。 如 果 项 目 比 较 小 ， 例 如 第 
8 章 中 的 todos 项 目 采 用 这 种 结构 问题 还 不 大 ， 但 对 于 一 个 规模 较 大 的 项 目 来 说 ， 使 用 这 种 项 目 结 
构 是 非常 不 方便 的 。 


2. 按照 页 面 功 能 


一 个 页 面 功 能 对 应 一 个 文件 夹 ， 这 个 页 面 功能 所 用 到 的 container、component、action、reducer 
等 文件 都 存放 在 这 个 文件 夹 下 ， 如 下 所 示 : 


featurel/ 
components/ 
actions.js 
container.js 
index.js 
reducer.js 

feature2/ 
components/ 
actions.js 
container.js 
index.js 
reducer.js 

index.js 


rootReducer.js 
这 种 项 目 结构 的 好 处 显而易见 ， 一 个 页 面 功能 使 用 到 的 组 件 、 状 态 和 行为 都 在 同一 个 文件 夹 


下 ， 方 便 开发 ， 易 于 功能 的 扩展 ，Github 上 很 多 脚手架 也 选择 了 这 种 目录 结构 ， 如 
https://github.com/react-boilerplate/react-boilerplate。 但 使 用 这 种 结构 依然 无 法 解决 开发 一 个 功能 时 ， 
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需要 频繁 在 reducer、action、action type 等 不 同文 件 间 切 换 的 问题 。 另 外 ，Redux 将 整个 应 用 的 状 
态 放 在 一 个 store 中 来 管理 ,不 同 的 功能 模块 之 间 可 以 共享 store 中 的 部 分 状态 (项 目 越 复杂 ， 这 种 
场景 就 会 越 多 )， 共 享 的 状态 应 该 放 到 哪 一 个 页 面 功能 文件 夹 下 也 是 一 个 问题 。 这 些 问题 归根 结 底 
是 因为 Redux 中 的 状态 管理 逻辑 并 不 是 根据 页 面 功能 划分 的 ， 它 是 页 面 功 能 之 上 的 一 层 抽 象 。 

3. Ducks 

Ducks 指 的 是 一 种 新 的 Redux 项 目 结构 的 提议 ， 这 份 提议 的 地 址 是 : https://github.conyerikras 
/ducks-modular-redux。 它 提倡 将 相关 联 的 reducer、action types 和 action creators 写 到 一 个 文件 里 。 
本 质 上 是 以 应 用 的 状态 作为 划分 模块 的 依据 ,而 不 是 以 界面 功能 作为 划分 模块 的 依据 。 这 样 , 管理 
相同 状态 的 依赖 都 在 同一 个 文件 中 , 无 论 哪个 容器 组 件 需 要 使 用 这 部 分 状态 , 只 需要 引入 管理 这 个 
状态 的 模块 文件 即 可 。 这 样 的 一 个 文件 〈 模 块 ) 代码 如 下 : 


// widget.js 


// Actions 

const LOAD = 'widget/LOAD'; 
const CREATE = 'widget/CREATE'; 
const UPDATE = 'widget/UPDATE'; 
const REMOVE = 'widget/REMOVE'; 


const initialState = { 
widget: null, 
isLoading: false, 


} 


// Reducer 
export default function reducer (state = initialState，action = {}) { 
switch (action.type) { 
LOAD: 
//... 
CREATE: 
//... 
UPDATE: 
/i/... 
REMOVE : 
//... 
default: return state; 
} 
} 


// Action Creators 

export function loadWidget() { 
return { type: LOAD }; 

} 
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export function createWidget (widget) { 
return { type: CREATE, widget }; 
} 


export function updateWidget (widget) { 
return { type: UPDATE, widget }; 
$ 


export function removeWidget (widget) { 
return { type: REMOVE, widget }; 
} 


整体 的 目录 结构 如 下 : 
components/ (通用 组 件 ) 
containers/ 

featurel/ 


components/ (featurel 的 专用 组 件 ) 
index.js (featurel 的 容器 组 件 ) 
redux/ 
index.js (combineReducers) 
modulel.js (reducer, action types, action creators) 
module2.js (reducer, action types, action creators) 


index.js 


在 前 两 种 项 目 结构 中 ， 当 container 需要 使 用 actions 时 ， 可 以 通过 import * as actions from 
'path/to/actions.js' 的 方式 一 次 性 把 一 个 action 文件 中 的 所 有 action creators 都 引入 进来 。 但 在 使 用 
Ducks 结构 时 ，action creators 和 reducer 定义 在 同一 个 文件 中 ，import * 的 导入 方式 会 把 reducer 也 


导入 进来 (如 果 action types 也 被 export， 那 么 还 会 导入 action types) 。 为 解决 这 个 问题 ， 可 以 把 
action creators 和 action types 定义 到 一 个 命名 空间 中 : 


// widget.js 


// Actions， 定 义 到 types 命名 空间 下 
export const types = { 
LOAD : 'widget/LOAD', 
CREATE: "widget/CRERTE' 
UPDATE: ‘'widget/UPDATE', 
REMOVE: 'widget/REMOVE'" 
} 


const initialstate 


{ 
widget: null, 
isLoading: false, 


} 


// Reducer 
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export default function reducer(state = initialState action = {}) { 
switch (action.type) { 
types .LOAD: 
Has 
types .CREATE: 
Hs 
types .UPDATE: 
了 
types .REMOVE : 
fis 
default: return state; 
} 
} 


// Action Creators， 定 义 到 actions 命名 空间 下 
export const actions = { 
loadWidget: function() { 
return { type: types.LOAD }; 
} 
createWidget: createWidget (widget) { 
return { type: types.CREATE, widget }; 
}, 
updateWidget: function(widget) { 
return { type: types.UPDATE, widget }; 
}, 
removeWidget: function(widget) { 
return { type: types.REMOVE, widget }; 
} 
} 


这 样 , 在 container 中 使 用 action creators 时 ,可 以 通过 import { actions } from 'path/to/module.js' 
引入 ， 避 免 引 入 额外 的 对 象 ， 也 避免 逐个 导入 action creator 的 烦琐 。 

采用 Ducks 这 种 项 目 结构 重新 组 织 BBS 项 目的 目录 结构 ， 最 终 的 目录 结构 如 图 9-1 所 示 。 

这 里 , 我 们 把 action types、action creators 和 reducer 组 成 的 每 一 个 模块 都 放 到 了 redux/modules 
路 径 下 , 而 不 是 直接 放 在 redux 文 件 夹 下 ,一 方面 是 因为 redux 文 件 夹 下 可 能 还 需要 放置 其 他 与 redux 
相关 的 模块 , 例如 自 定义 的 Middleware; 另 一 方面 , 增加 一 层 modules 文件 夹 更 能 体现 其 作为 核心 
业务 逻辑 模块 的 意义 。 模 块 的 划分 方式 及 其 具体 内 容 接 下 来 就 会 介绍 。 另 外 ，components 文件 夹 
下 的 很 多 页 面 专 用 组 件 移动 到 对 应 页 面 下 的 components 文件 夹 中 ， 例 如 ，PostItem 移动 到 
PostList/components 下 ，PostView、PostEditor 和 CommentList 移动 到 Post/components 下 ， 如 图 9-2 
所 示 。src/components 中 只 保留 具有 全 局 通用 性 质 的 组 件 ， 例 如 页 面 加 载 效 果 组 件 Loading、 用 于 
显示 错误 信息 的 模 态 框 组 件 ModalDialog 等 。 
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9.2 设计 state 


Redux 应 用 执行 过 程 中 的 任何 一 个 时 刻本 质 上 都 是 该 时 刻 的 应 用 state 的 反映 。 可 以 说 ，state 
驱动 了 Redux 逻辑 的 运转 。 对 于 Redux 项 目 来 说 ， 设 计 良 好 的 state 结构 至 关 重要 。 下 面 先 来 看 看 
设计 state 时 容易 犯 的 两 个 错误 。 

9.2.1 错误 1; 以 API 作为 设计 state 的 依据 


以 API 作为 设计 state 的 依据 往往 是 一 个 API 对 应 全 局 state 中 的 一 部 分 结构 , 且 这 部 分 结构 同 
API 返回 的 数据 结构 保持 一 致 ( 或 接近 一 致 )。 例如， 在 BBS 项 目 中 ， 获取 帖子 列表 API 返回 的 
数据 结构 如 下 : 


[ 





id: "59f5cb68af52dd0b51be9503"， 
title: "大 家 一 起 来 讨论 React 吧 "， 
Vvote: 8， 
updatedAt: "2017-10-29T12:36:56.3232", 
author: { 

id: "59e6f27aa9436dd037ea53ae", 


username: "steve" 
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id: "59f590696834b5f7614ed5ab"， 
title: "前 端 框架 ， 你 最 爱 哪 一 个 "， 
vote: 2, 
updatedAt: "2017-10-26T08:48:56.8562", 
author: { 
id: "59e5d22f6722f75272b3bbcf"， 
username: "tom" 
} 
jy 
{ 
title: "Web App 的 时 代 已 经 到 来 "， 
vote: 10, 
updatedAt: "2017-10-26T08:48:56.8562"， 
author: { 
id: "59e5d22f6722f75272b3bbcf"， 
username: "tom" 
} 
} 


] 


当 查 看 帖子 详情 时 ， 需 要 调用 获取 帖子 详情 API 和 获取 帖子 评论 数据 API， 两 个 接口 返回 的 
数据 结构 分 别 如 下 : 


// 帖 子 详情 API 返回 数据 结构 
{ 
id: "59f5cb68af52dd0b5lbe9503", 
title: "大 家 一 起 来 讨论 React 吧 "， 
vote: 8, 
updatedAt: "2017-10-29T12:36:56.3232"， 
author: { 
id: "59e6f27aa9436dd037ea53ae", 
username: "steve" 
bs 
content: "前 端 UI 的 复杂 化 ， 其 本 质问 题 是 如 何 将 来 源 于 服务 器 端的 动态 数据 和 用 户 的 交互 行为 
高 效 地 反映 到 复杂 的 用 户 界面 上 。React 另辟蹊径 ， 通 过 引入 虚拟 DOM、 状 态 、 单 向 数据 流 等 设计 理念 ， 
形成 以 组 件 为 核心 , 用 组 件 搭建 UI 的 开发 模式 理 顺 了 UI 的 开发 过 程 , 完美 地 将 数据 、 组 件 状态 和 oI 映射 
到 一 起 ， 极 大 地 提高 了 开发 大 型 web 应 用 的 效率 。" 


} 
/ /评论 列表 API 返回 数据 结构 
[ 
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id: "59flal7ffb49aaf956b46215", 
content: "大 爱 React! "， 
updatedAt: "2017-10-26T08:49:03.2352", 
author: { 
id: "59e5d22f6722f75272b3bbcf"， 
username: "tom" 
} 
}, 
|! 
id: "59flal7ffb49aaf956b46215", 
content: "React 大 大 提高 了 开发 效率 ! "， 
updatedAt: "2017-10-26T08:49:03.2352"， 
author: { 
id: "59e6f27aa9436dd037ea53ae", 





username: "steve" 


上 面 三 个 接口 的 数据 分 别 作为 state 的 一 部 分 ， 组 合 在 一 起 构成 应 用 全 局 的 state: 


{ 
posts: [ 
{ 
id: "59f5cb68af52dd0b5lbe9503", 
title: "大 家 一 起 来 讨论 React 吧 "， 
Vote: 8, 
updatedAt: "2017-10-29T12:36:56.3232"， 
author: { 
id: "59e6f27aa9436dd037ea53ae", 


username: "steve" 


currentPost: { 
id: "59f5cb68af52dd0b51be9503"， 
title: "大 家 一 起 来 讨论 React 吧 "， 
Vvote: 8， 
updatedAt: "2017-10-29T12:36:56.3232", 
author: { 
id: "59e6f27aa9436dd037ea53ae", 
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username: "SteVe" 
} 
content: "前 端 UI 的 复杂 化 ， 其 本 质问 题 是 如 何 将 来 源 于 服务 器 端的 动态 数据 和 用 户 的 交互 行 
为 高 效 地 反映 到 复杂 的 用 户 界面 上 。React 另辟蹊径 ， 通 过 引入 虚拟 DoM、 状 态 、 单 向 数据 流 等 设计 理念 ， 
形成 以 组 件 为 核心 , 用 组 件 搭建 UI 的 开发 模式 理 顺 了 UI 的 开发 过 程 ， 完 美 地 将 数据 、 组 件 状态 和 UI 映射 
到 一 起 ， 极 大 地 提高 了 开发 大 型 web 应 用 的 效率 。" 
}, 
currentComments: [ 
{ 
id: "59flal7ffb49aaf956b46215", 
content: "大 爱 React! "， 
updatedAt: "2017-10-26T08:49:03.2352"， 
author: { 
id: "59e5d22f6722f75272b3bbcf"， 


username: "tom" 


这 个 state 中 ，posts 和 currentPost 存在 很 多 重复 的 信息 ， 而 且 posts、currentComments 是 数组 
类 型 的 结构 ， 不 便于 查找 ， 每 次 查找 某 条 记录 时 ， 都 需要 遍历 整个 数组 。 这 些 问 题 本 质 上 是 因为 
API 是 基于 服务 端 逻辑 设计 的 ， 而 不 是 基于 应 用 的 状态 设计 的 。 比 如 ， 虽 然 获取 帖子 列表 时 已 经 获 
取 到 帖子 的 标题 、 作 者 等 基本 信息 ， 但 对 于 获取 帖子 详情 的 API 来 说 ， 根 据 API 的 设计 原则 ， 这 
个 API 依然 应 该 包含 这 些 基 本 信息 ， 而 不 能 只 是 返回 帖子 的 正文 内 容 。 再 比如 ，posts、 
currentComments 之 所 以 返回 数组 结构 ， 是 考虑 到 数据 的 有 序 性 、 分 页 等 因素 。 


9.2.2 错误 2: 以 页 面 UI 为 设计 state 的 依据 


既然 不 能 依据 API 设计 state， 很 多 人 又 会 走 另 一 条 路 ， 基 于 页 面 UI 设计 state。 页 面 UI 需要 
什么 样 的 数据 和 数据 结构 ，state 就 设计 成 什么 样 。 以 todos 应 用 为 例 ， 页 面 会 有 三 种 状态 : 显示 所 
有 的 事项 、 显 然 所 有 的 已 办 事项 和 显示 所 有 的 待 办 事项 。 以 页 面 UI 为 设计 state 的 依据 ， state 将 
是 这 样 的 : 


id: 1v 
texte “让 


completed: false 
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text: "todo 2", 
completed: true 
} 
]， 


uncompleted: [ 


ad 工 
tewts "Eodo. 1™> 


completed: false 


], 
completed: [ 


id: 2, 
texts "todo 2m7 


completed: false 





] 
} 


这 个 state 对 于 展示 UI 的 组 件 来 说 使 用 起 来 非常 方便 , 当前 应 用 处 于 哪 种 状态 , 就 用 对 应 状态 
的 数组 类 型 的 数据 渲染 UI， 不 用 做 任何 中 间 数 据 转换 。 但 这 种 state 存在 的 问题 也 很 容易 被 发 现 ， 
一 是 这 种 state 依然 存在 数据 重复 的 问题 ; 二 是 当 新 增 或 修改 一 条 记录 时 ， 需 要 修改 不 止 一 个 地 方 。 
例如 ， 当 新 增 一 条 记录 时 ，all 和 uncompleted 这 两 个 数组 都 要 添加 这 条 新 增 记 录 。 这 样 设计 的 state 
既 会 造成 存储 的 浪费 ， 又 会 存在 数据 不 一 致 的 风险 。 

这 两 种 设计 state 的 方式 实际 上 是 两 种 极端 ， 在 实际 项 目 中 ， 完 全 按照 这 两 种 方式 设计 state 的 
开发 者 并 不 多 ， 但 绝 大 部 分 人 都 会 受到 这 两 种 设计 方式 的 影响 。 


9.2.3 ”合理 设计 state 


看 过 了 state 的 错误 设计 方式 ， 下 面 来 看 一 下 应 该 如 何 合理 地 设计 state。 设 计 state 时 ， 最 重要 
的 是 记 住 一 句 话 : 像 设计 数据 库 一 样 设计 state。 把 state 看 作 一 个 数据 库 ，state 中 的 每 一 部 分 状态 
看 作 数 据 库 中 的 一 张 表 , 状态 中 的 每 一 个 字段 对 应 表 的 一 个 字段 。 设 计 一 个 数据 库 应 该 遵循 以 下 三 
个 原则 : 
(1) 数据 按照 领域 (Domain) 分 类 存储 在 不 同 的 表 中 ， 不 同 的 表 中 存储 的 列 数据 不 能 重复 。 
(2) 表 中 每 一 列 的 数据 都 依赖 于 这 张 表 的 主键 。 
(3) 表 中 除了 主键 以 外 ， 其 他 列 互相 之 间 不 能 有 直接 依赖 关系 。 
根据 这 三 个 原则 可 以 翻译 出 设计 state 时 的 原则 : 
(1) 把 整个 应 用 的 状态 按照 领域 分 成 若干 子 状态 ， 子 状态 之 间 不 能 保存 重复 的 数据 。 
(2) state 以 键 值 对 的 结构 存储 数据 ， 以 记录 的 key 或 ID 作为 记录 的 索引 ， 记 录 中 的 其 他 字 
段 都 依赖 于 索引 。 
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(3) state 中 不 能 保存 可 以 通过 state 中 的 已 有 字段 计算 而 来 的 数据 ， 即 state 中 的 字段 不 互相 
依赖 。 


按照 这 三 个 原则 重新 设计 BBS 的 state。 按 领域 划分 ，state 可 以 拆 分 为 三 个 子 state: posts、 
comments 和 users，posts 中 的 记录 以 帖子 的 id 为 key 值 ， 结 构 如 下 : 


posts: { 

59f5cb68af52dd0b51be9503: { 
id: "59f5cb68af52dd0b51be9503"， 
title: "大 家 一 起 来 讨论 React 吧 "， 
vote: 8, 
updatedAt: "2017-10-29T12:36:56.3232", 
author: "59e6f27aa9436dd037ea53ae" 

} 

59f590696834b5f7614ed5ab: { 
id: "59f590696834b5f7614ed5ab"， 
title: "前 端 框架 ， 你 最 爱 哪 一 个 "， 
vote: 2, 
updatedAt: "2017-10-29T12:36:56.3232", 
author: "59e5d22f6722f75272b3bbcf" 

}, 


} 


这 个 结构 相 比 前 面 的 按 API 划分 state 结构 变化 之 处 主要 有 两 点 : 第 一 点 是 ,posts 中 的 数据 类 
型 由 数组 类 型 改 为 以 帖子 id 为 key 的 JSON 对 象 类 型 ; 第 二 点 是 ，author 字段 不 再 存储 完整 的 作者 
信息 ， 只 存储 作者 的 id。 第 一 个 变化 可 以 方便 在 使 用 posts 时 快速 根据 id 获取 对 应 帖子 数据 ; 第 二 
个 变化 把 原本 嵌 套 的 数据 结构 扁平 化 ， 避 免 了 查询 和 修改 嵌 套 数据 时 需要 向 下 访问 多 个 层级 的 烦 
琐 ， 同 时 扁平 化 的 数据 结构 更 利于 扩展 。 

但 这 个 state 还 有 不 满足 应 用 需求 的 地 方 : 键 值 对 的 存储 方式 无 法 保证 数据 的 有 序 性 ， 但 对 于 
帖子 列表 ， 有 序 性 显然 是 需要 的 。 解 决 这 个 问题 可 以 通过 定义 一 个 数组 类 型 的 属性 alllds 存储 帖子 
的 id， 同 时 将 之 前 的 键 值 对 类 型 的 数据 存储 在 byId 属性 下 : 


posts: { 
byId: { 
59f5cb68af52dd0b51be9503: { 
id: "59f5cb68af52dd0b51be9503"， 
title: "大 家 一 起 来 讨论 React 吧 "， 
Vote: 8, 
updatedAt: "2017-10-29T12:36:56.3232"， 
author: "59e6f27aa9436dqd037ea53ae" 
}, 
59f590696834b5f7614ed5ab: { 
id: "59f590696834b5f7614ed5ab"， 
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title: "前 端 框架 ， 你 最 爱 哪 一 个 "， 
vote: 2, 
updatedAt: "2017-10-29T12:36:56.3232", 
author: "59e5d22f6722f75272b3bbcf" 
jy 
bs 
allIds: ["59f5cbé6é8af52dd0b5lbe9503","59f590696834b5f76l4ed5ab", ...] 
}, 


这 样 一 来 ，alllds 负责 维护 数据 的 有 序 性 ，byId 负责 根据 id 快速 查询 对 应 数据 。 这 种 设计 state 
的 方式 是 很 常用 的 一 种 方式 ， 请 读者 注意 。 

posts 不 再 保存 完整 的 作者 信息 ， 那 么 作者 信息 的 查询 就 有 赖 于 领域 users 对 应 的 子 state。 应 
用 中 不 关注 作者 的 顺序 ， 因 此 我 们 只 需要 使 用 以 作者 id 为 key 的 键 值 对 存储 数据 即 可 : 


users: { 

59e5d22f6722f75272b3bbcf: { 
id: "59e5d22f6722f75272b3bbcf"， 
username: "tom" 

}, 

59e6f27aa9436dd037ea53ae: { 
id: "59e6f27aa9436dd037ea53ae", 
username: "steve" 


}， 


} 


评论 数据 是 通过 单独 的 API 获取 的 ， 但 评论 数据 是 从 属于 某 个 帖子 的 ， 这 个 关系 应 该 如 何在 
state 中 体现 呢 ? 有 两 种 方法 : 第 一 种 是 在 posts 对 应 的 state 中 增加 一 个 comments 属性 ， 存 储 该 帖 
子 对 应 的 评论 数据 的 id; 第 二 种 是 在 comments 对 应 的 state 中 增加 一 个 byPost 属性 ， 存 储 以 帖子 
id 作为 key， 以 这 个 帖子 下 的 所 有 评论 id 作为 值 的 对 象 。 使 用 第 二 种 方法 ， 当 调用 API 请 求 评论 
数据 时 ， 只 需要 修改 comments 对 应 的 state 即 可 ， 使 用 第 一 种 方法 还 需要 修改 posts 对 应 的 state， 
因此 这 里 使 用 第 二 种 方法 : 


comments: { 
byPosts { 
59f5cb68af52dd0b51be9503: ["59flal7ffb49aaf956b46215", 
"59flal7ffb49aaf956b46215", ...], 


}, 
byId: { 
59flal7ffb49aaf956b46215: { 
id: "59flal7ffb49aaf956b46215", 
content: "大 爱 React! "， 
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updatedAt: "2017-10-26T08:49:03.2352", 
author: "59e5d22f6722f75272b3bbcf" 

}, 

59flal7ffb49aaf956b46215: { 
id: "59flal7ffb49aaf956b46215", 
content: "React 大 大 提高 了 开发 效率 ! "， 
updatedAt: "2017-10-26T08:49:03.2352", 
author: 59e6f27aa9436dd037ea53ae" 

}, 


} 
} 


byPost 保存 帖子 id 到 评论 id 的 映射 关系 ，byId 保存 评论 id 到 评论 数据 的 映射 关系 。 
由 posts、comments 和 users 三 个 领域 组 成 的 state 结构 如 下 : 
{ 
posts: { 
byId: { 


}, 
all1dss [ss] 
}, 
comments: { 
byPost: { 


}, 
byId: { 


} 


到 目前 为 止 , 我 们 的 state 都 是 根据 领域 数据 进行 设计 的 , 但 实际 上 ， 应 用 的 state 不 仅 包含 领 
域 数 据 ， 还 包含 应 用 状态 数据 和 UI 状态 数据 。 应 用 状态 数据 指 反 映 应 用 行为 的 数据 ， 例 如 ， 当 前 
登录 的 状态 、 是 否 有 API 请 求 在 进行 等 。UI 状态 数据 是 代表 UI 当前 如 何 显示 的 数据 , 例如 对 话 框 
当前 是 否 处 于 打开 状态 等 。 


有 些 开发 者 习惯 把 UI 状态 数据 仍然 保存 在 组 件 的 state 中 ， 由 组 件 自己 管理 ， 而 不 是 
注意 交 给 Redux 管理 。 这 也 是 一 种 可 选 的 做 法 ， 但 将 UI 状态 数据 也 交 给 Redux 统一 管理 
有 利于 应 用 UI 状态 的 追溯 。 
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在 BBS 项 目 中 ， 我 们 将 应 用 状态 分 为 两 部 分 ， 一 部 分 专门 记录 登录 认证 相关 的 状态 ， 保 存 到 
子 state auth 中 ， 其 余 应 用 状态 保存 到 子 state app 中 。 这 两 部 分 state 结构 如 下 : 


app: { 
requestQuantity: 0， // 当前 应 用 中 正在 进行 的 API 请 求 数 
error: null // 应 用 全 局 错误 信息 

}, 

auth: { 


userId: null, 
username: null 


} 


app 中 保存 了 当前 进行 中 的 API 请 求 数量 和 应 用 的 错误 信息 ,auth 中 保存 了 当前 登录 的 用 户 人 
和 用 户 名 。 当 需要 管理 的 应 用 状态 数据 增多 时 ， 可 以 进一步 将 app 拆 分 成 多 个 子 state。 类 似 地 ， 
我 们 将 UI 状态 数据 保存 到 子 state ui 中 : 
二 下 人 并 
addDialogopen: false, // 用 于 新 增 帖 子 的 对 话 框 的 显示 状态 
editDialogopen: false // 用 于 编辑 帖子 的 对 话 框 的 显示 状态 
} 


这 里 涉及 的 UI 状态 数据 比较 少 ， 只 保存 了 新 增 帖子 对 话 框 和 编辑 帖子 对 话 框 的 状态 。 
至 此 ， 由 领域 数据 、 应 用 状态 数据 、UI 状态 数据 组 成 的 完整 state 结构 如 下 : 


posts: { 
byId: { 


}, 
allildss [sse]l 
} 
comments: { 
byPost: { 


}, 
byId: { 
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9.3 设计 模块 


在 9.1 节 中 已 经 介绍 过 ， 一 个 功能 相关 的 reducer、action types、action creators 将 定义 到 一 个 
文件 中 ， 作 为 一 个 Redux 模块 。 根 据 state 的 结构 ， 我 们 可 以 拆 分 出 app、auth、posts、comments、 
users、ui 和 index 七 个 模块 。 下 面 就 来 逐一 介绍 。 


9.3.1 app 模块 
app 模块 负责 标记 API 请 求 的 开始 和 结束 以 及 应 用 全 局 错误 信息 的 设置 ，appjs 代码 如 下 : 


const initialState = { 
requestQuantity: 0， // 当前 应 用 中 正在 进行 的 API 请 求 数 
error: null // 应 用 全 局 错误 信息 

}; 


// action types 


export const types = { 


START REQUEST: "APP/START REQUEST", // 开始 发 送 请 求 
FINISH REQUEST: "APP/FINISH _ REQUEST"， // 请 求 结束 

SET_ ERROR: "APP/SET ERROR", // 设置 错误 信息 
REMOVE ERROR: "APP/REMOVE ERROR" // 删除 错误 信息 


}; 


// action creators 
export const actions = { 
startRequest: () => ({ 
type: types.START REQUEST 
1), 
finishRequest: () => ({ 
type: types.FINISH REQUEST 
1D), 
setError: error => ({ 
type: types.SET ERROR, 


error 
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Ws 
removeError: () => ({ 
type: types.REMOVE ERROR 
i 
}; 


// reducers 
const reducer = (state = initialSstate, action) => { 
switch (action.type) { 
Case types.START REQUEST: 
// 每 接收 一 个 API 请 求 开 始 的 action,，requestQuantity 加 1 
return { ...state, requestQuantity: state.requestQuantity + 1 }; 
Case types.FINISH REQUEST: 
// 每 接收 一 个 API 请 求 结束 的 action，requestQuantity 减 1 
return { ...state, requestQuantity: state.requestQuantity - 1 }; 


Case types.SET ERROR: 


return { ...state, error: action.error }; 
Case types.REMOVE ERROR: 

return { ...state, error: null }; 
default: 


return state; 
} 
js 


export default reducer; 
这 里 需要 注意 ,app 模块 中 的 action creators 会 被 其 他 模块 调用 。 例如， 其 他 模块 用 于 请 求 API 
的 异步 action 中 ， 需 要 在 发 送 请 求 的 开始 和 结束 时 分 别 调用 startRequest 和 finishRequest; 在 API 


返回 错误 信息 时 ， 需 要 调用 setError 设置 错误 信息 。 这 也 说 明 ， 我 们 定义 的 模块 并 非 只 能 被 UI 组 
件 使 用 ， 各 个 模块 之 间 也 是 可 以 互相 调用 的 。 


9.3.2 ”auth 模块 


auth 模块 负责 应 用 的 登录 和 注销 。 登 录 会 调用 服务 器 API 做 认证 ， 这 时 就 涉及 异步 action， 我 
们 使 用 前 面 介绍 的 redux-thunk 定义 异步 action。 注 销 逻 辑 仍然 简化 处 理 ， 只 是 清除 客户 端的 登录 
用 户 信息 。authjs 的 主要 代码 如 下 : 


import { post } from "../../utils/request"; 





import Url from "../../utils/url"; 


import { actions as appActions } from "./app"; 


const initialState = { 
userId: null, 
username: null 


}; 


172 第 3 篇 ”实战 篇 一 一 在 大 型 Web 应 用 中 使 用 React 





// action types 
export const types = { 
LOGIN: "RUTH/LOGIN"， // 登 录 
LOGOUT: "AUTH/LOGOUT" ”// 注 销 
}; 


// action creators 
export const actions = { 
// 异步 action， 执 行 登录 验证 
login: (username, password) => { 
return dispatch => { 
// 每 个 API 请 求 开始 前 ， 发 送 app 模块 定义 的 startRequest action 
dispatch (appActions.startRequest ()); 
const params = { username, password }; 
return post(url.login(), params).then(data => { 
// 每 个 API 请 求 结束 后 ， 发 送 app 模块 定义 的 finishRequest action 
dispatch (appActions.finishRequest ()); 
// 请 求 返回 成 功 ， 保 存 登录 用 户 的 信息 ， 否 则 ， 设 置 全 局 错误 信息 
if (!data.error) { 
dispatch(actions.setLoginInfo(data.userId, username)); 
} else { 


dispatch (appActions.setError (data.error)); 


Ni 

i 

} 

logout: () => ({ 
type: types.LOGOUT 

D), 

setLoginInfo: (userId, username) => ({ 
type: types.LOGIN, 
userId: userId, 
username: username 

} 

}; 


// reducers 
const reducer = (state = initialstate, action) => { 
switch (action.type) { 
Case types.LOGIN: 
return { ...state, userId: action.userId, username: action.username }; 
case types.LOGOUT: 


return { ...state, userId: null, username: null }; 
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default: 
return state; 
} 
}; 


export default reducer; 


9.3.3 ”posts 模块 


posts 模块 负责 与 帖子 相关 的 状态 管理 ， 包 括 获取 帖子 列表 、 获 取 帖 子 详情 、 新 建 帖子 和 修改 
帖子 。 使 用 到 的 action types 定义 如 下 : 


// action types 


export const types = { 


CRERTE POST: "POSTS/CRERTE POST"， // 新 建 帖子 
UPDRTE_POST: "POSTS/UPDRTE POST"， // 修 改 帖子 
FETCH_ALL_POSTS: "POSTS/FETCH_ALL POSTS"， // 获 取 帖子 列表 
FETCH POST: "POSTS/FETCH POST" // 获 取 帖子 详情 


j 
相应 地 ， 我 们 需要 定义 如 下 action creators: 


// action creators 
export const actions = { 
// 获取 帖子 列表 
fetchAllPosts: () => { 
return (dispatch, getState) => { 
if (shouldFetchRllPosts (getState())) { 
dispatch (appActions.startRequest () ) 7 
return get (url.getPostList()).then(data 


外 
v 


dispatch (appActions.finishRequest ()); 

if (!data.error) { 
const { posts, postsIds, authors } = convertPostsToPlain(data); 
dispatch (fetchAllPostsSuccess (posts, postsIds, authors)); 

} else { 


dispatch (appActions.setError (data.error)); 


}, 
// 获取 帖子 详情 
fetchPost: id => { 
return (dispatch, getState) => { 
if (shouldFetchPost (id，getState())) { 
dispatch (appActions.startRequest () ) 7 
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return get (url.getPostById(id)) .then(data => { 
dispatch (appActions.finishRequest ()); 
if (!data.error && data.length === 1) { 
const { post, author } = convertSinglePostToPlain(data[0]); 
dispatch (fetchPostSuccess (post, author)); 
} else { 


dispatch (appActions.setError (data.error)); 


]}， 
// 新 建 帖子 
createPost: (title, content) => { 
return (dispatch, getState) => { 
Const state = getstate(); 
const author = state.auth.userId; 


{ 


const params 
author, 
title, 
content, 
vote: 0 

}; 

dispatch (appActions.startRequest ()); 

return post(url.createPost(), params) .then(data => { 
dispatch (appActions.finishRequest ()); 
if (!data.error) { 

dispatch (createPostSuccess (data) ) 7 

} else { 


dispatch (appActions.setError (data.error)); 


1D); 
] 7 
}, 
// 更 新 帖子 
updatePost: (id, post) => { 
return dispatch => { 
dispatch(appActions.startRequest ()); 
return put (url.updatePost (id), post) .then(data => { 
dispatch (appActions.finishRequest ()); 
if (!data.error) { 
dispatch (updatePostSuccess (data)); 
} else { 
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dispatch (appActions.setError (data.error)); 


// 获取 帖子 列表 成 功 

const fetchAllPostsSuccess = (posts, postIds, authors) => ({ 
type: types.FETCH ALL POSTS, 
posts, 
postIds, 
users: authors 

Ds 

// 获取 帖子 详情 成 功 

const fetchPostSuccess = (post, author) => ({ 
type: types.FETCH POST, 
post, 
user: author 

]) 7 

// 新 建 帖子 成 功 

const createPostSuccess = post => ({ 
type: types.CREATE POST, 
bosts post 

1); 

// 更 新 帖子 成 功 

const updatePostSuccess = post => ({ 
type: types.UPDATE POST, 
post: post 

Ds 


这 里 有 几 个 地 方 需要 注意 : 


(1) 每 一 个 action type 实际 上 对 应 两 个 action creator， 一 个 创建 异步 action 发 送 API 请 求 ， 
例如 fetchAllPosts; 另 一 个 根据 API 返回 的 数据 创建 普通 的 action， 例 如 fetchAllPostsSuccess。 

(2) 供 外 部 使 用 的 action creators 定义 在 常量 对 象 actions 中 ， 例 如 fetchAllPosts、fetchPost、 
createPost 和 updatePost 。 仅 在 模块 内 部 使 用 的 action creators 不 需要 被 导出 ， 例 如 
fetchAllPostsSuccess、fetchPostSuccess、createPostSuccess 和 updatePostSuccess。 

(3) Redux 的 缓存 作用 。fetchAllPosts 中 调用 了 shouldFetchAllPosts， 用 于 判断 当前 的 state 
中 是 否 已 经 有 帖子 列表 数据 ， 如 果 没 有 才 会 发 送 API 请 求 。 之 所 以 可 以 这 么 处 理 ， 正 是 基于 Redux 
使 用 一 个 全 局 state 管理 应 用 状态 ， 这 种 缓存 机 制 可 以 提高 应 用 的 性 能 。fetchPost 中 调用 的 
shouldFetchPost 也 是 同样 的 作用 。 

(4) API 返回 的 数据 结构 往往 有 嵌 套 ， 我 们 需要 把 嵌 套 的 数据 结构 转换 成 扁平 的 结构 ， 这 样 
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才能 方便 地 被 扁平 化 的 state 所 使 用 。fetchAllPosts 中 的 convertPostsToPlain 和 fetchPost 中 

convertSinglePostToPlain 两 个 函数 就 用 于 执行 这 个 转换 过 程 的 。 转 换 过 程 的 实现 依赖 于 API 返回 的 

数据 结构 和 业务 逻辑 ， 具 体 代 码 参考 项 目 源 代 码 。 另 外 ， 还 可 以 使 用 normalizr 
(Chttps:/Wgithub.comy/paularmstrong/normalizr) 这 个 库 将 嵌 套 的 数据 结构 转换 成 扁平 结构 。 


posts 模块 的 state 又 拆 分 成 alllds 和 byId 两 个 子 state， 每 个 子 state 使 用 一 个 reducer 处 理 ， 最 
后 通过 Redux 提供 的 combineReducers 把 两 个 reducer 合并 成 一 个 。posts 模块 的 reducer 定义 如 下 : 


// reducers 
const allIds = (state = initialState.-allIds，action) => { 
switch (action.type) { 
Case types.FETCH ALL POSTS: 
return action.postIds; 
Case types.CREATE POST: 
return [action.post.id, ...state]; 
default: 
return state; 
} 
J} 


const byId = (state = initialState.byId，action) => { 
switch (action.type) { 
Case types.FETCH ALL POSTS: 
return action.posts; 
Case types.FETCH POST: 
Case types.CREATE POST: 
Case types.UPDATE POST: 
return { 
.state, 
[action.post.id]: action.post 
jr 
default: 
return state; 
} 
}; 


const reducer = combineReducers({ 
allIds, 
byId 

]) 7 


export default reducer; 


至 此 , 我 们 完成 了 posts 模块 的 设计 ， 这 也 是 所 有 模块 中 最 复杂 的 一 个 模块 。postsjs 的 完整 代 
码 可 参考 项 目 源 代码 。 
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9.3.4 ”comments 模块 


comments 模块 负责 获取 帖子 的 评论 列表 和 创建 新 评论 ， 与 posts 模块 功能 很 相近 ， 这 里 不 再 
详细 分 析 ， 只 给 出 主要 逻辑 代码 : 


{ 


const initialstate 
byPost: {}, 
byId: {} 

] 


// action types 

export const types = { 
FETCH_COMMENTS: "COMMENTS/FETCH_ COMMENTS"，  // 获取 评论 列表 
CREATE COMMENT: "COMMENTS/CREATE COMMENT™" // 新 建 评论 

}; 


// action creators 
export const actions = { 
// 获取 评论 列表 
fetchComments: postId => { 
return (dispatch, getState) => { 
if (shouldFetchComments (postId, getstate())) { 
dispatch (appActions.startRequest ()); 
return get (url.getCommentList (postId) ) .then(data => { 
dispatch (appActions.finishRequest ()); 
if (!data.error) { 
const { comments, commentIds, users } = 
convertToPlainstructure (data); 
dispatch (fetchCommentsSuccess (postId, commentIds, comments, 


users)); 
} else { 
dispatch (appActions.setError (data.error)); 
} 
1); 
} 
] 7 
jv 
// 新 建 评论 


createComment: comment => { 
return dispatch => { 
dispatch(appActions.startRequest ()); 
return post(url.createComment (), comment) .then(data => { 


dispatch (appActions.finishRequest ()); 
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if (!data.error) { 
dispatch(createCommentSuccess (data.post, data)); 
} else { 


dispatch (appActions.setError (data.error)); 


// 获取 评论 列表 成 功 
const fetchCommentsSuccess = (postId, commentIds, comments, users) => ({ 
type: types.FETCH COMMENTS, 
postId, 
commentIds, 
comments, 
users 
1); 


// 新 建 评论 成 功 

const createCommentSuccess = (postId, comment) => ({ 
type: types.CREATE COMMENT, 
postId, 
comment 

1); 


// reducers 
const byPost = (state = initialState.byPost，action) => { 
switch (action.type) { 
Case types.FETCH COMMENTS: 
return { ...state, [action.postId]: action.commentIds }; 
Case types.CREATE COMMENT: 
return { 
i 
[action.postId]: [action.comment.id, ...state[action.postId]] 
] 7 
default: 
return state; 
}; 


const byId = (state = initialState-byId，action) => { 
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Switch (action-type) { 
Case types.FETCH COMMENTS : 
return { ...state, ...action.comments }; 
Case types.CREATE COMMENT: 
return { ...state, [action.comment.id]: action.comment }; 
default: 
return state; 
} 
] 7 


const reducer = combineReducers ({ 
byPost, 
byId 

1s 


export default reducer; 


9.3.5 ”users 模块 


users 模块 负责 维护 用 户 信息 。 这 个 模块 有 些 特殊 ， 因 为 它 不 需要 定义 action types 和 action 
creators， 它 响应 的 action 都 来 自 posts 模块 和 comments 模块 。 例 如 ， 当 posts 模块 获取 帖子 列表 数 
据 时 ，users 模块 也 需要 把 帖子 列表 数据 中 的 用 户 〈 作 者 ) 信息 保存 到 自身 state 中 。usersjs 的 主要 
代码 如 下 : 


import { types as commentTypes } from "./comments"; 


import { types as postTypes } from "./posts"; 
const initialState = {}; 


// reducers 
const reducer = (state = initialSstate, action) => { 
switch (action.type) { 
// 获取 评论 列表 和 帖子 列表 时 ， 更 新 列表 数据 中 包含 的 所 有 作者 信息 
Case commentTypes.FETCH REMARKS: 
Case postTypes.FETCH ALL POSTS: 
return { ...state, ...action.users }; 
// 获取 帖子 详情 时 ， 只 需 更 新 当前 帖子 的 作者 信息 
Case postTypes.FETCH _ POST: 
return { ...state, [action.user.id]: action.user }; 
default: 
return state; 
} 
] 7 


export default reducer; 
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action 和 reducer 之 间 并 不 存在 一 对 一 的 关系 。 一 个 action 是 可 以 被 多 个 模块 的 reducer 
注意 处 理 的 ， 尤 其 是 当 模块 之 间 存 在 关联 关系 时 ， 这 种 场景 更 为 常见 。 


9.3.6 ui 模块 
也 模块 的 功能 很 简单 ， 这 里 只 给 出 主要 代码 : 


import { types as postTypes } from "./posts"; 


const initialState = { 
addDialogOpen: false, 
editDialogOpen: false 
}; 


// action types 

export const types = { 
OPEN_ADD_DIALOG: "UI/OPEN_ADD_DIALOG"，  // 打开 新 建 帖子 状态 
CLOSE_ADD_DIALOG: "UI/CLOSE RDD_DIRLOG"， // 关闭 新 建 帖子 状态 
OPEN_EDIT_DIALOG: "UI/OPEN_EDIT_DIALOG"， // 打开 编辑 帖子 状态 
CLOSE_EDIT_DIALOG: "UI/CLOSE_EDIT_DIALOG"” // 关闭 编辑 帖子 状态 
je 


// action creators 
export const actions = { 
// 打开 新 建 帖子 的 编辑 框 
openAddDialog: () => ({ 
type: types.OPEN ADD DIALOG 
D), 
// 关闭 新 建 帖子 的 编辑 框 
closeAddDialog: () => ({ 
type: types.CLOSE ADD DIALOG 
Ds, 
// 打开 编辑 帖子 的 编辑 框 
openEditDialog: () => ({ 
type: types.OPEN EDIT DIALOG 
Ds, 
// 关闭 编辑 帖子 的 编辑 框 
closeEditDialog: () => ({ 
type: types.CLOSE EDIT DIALOG 
}) 
}; 


// reducers 


第 9 章 Redux 项 目 实战 181 





const reducer = (state = initialState, action) => { 
switch (action.type) { 

case types.OPEN ADD DIALOG: 

return ...State, addDialogopen: true }; 
Case types.cLOSE ADD DIALOG: 
Case postTypes.CREATE POST: 

return ...State, addDialogOpen: false }; 
Case types.OPEN EDIT DIALOG: 

return ...State, editDialogOpen: true }; 
case types.cLOSE EDIT DIALOG: 
case postTypes.UPDATE POST: 

return ...State, editDialogopen: false }; 
default: 


return state; 





} 
}s 


export default reducer; 


9.6.7 index 模块 


在 redux/modules 路 径 下 ， 我 们 还 会 创建 一 个 index.js， 作 为 Redux 的 根 模块 。 在 index.js 中 做 
的 事情 很 简单 ， 只 是 将 其 余 模 块 中 的 reducer 合并 成 一 个 根 reducer。indexjs 的 代码 如 下 : 


import { combineReducers } from "redux"; 
import app from "./app"; 

import auth from "./auth"; 

import ui from "./ui"; 

import comments from "./comments"; 
import posts from "./posts"; 


import users from "./users"; 


// 合并 所 有 模块 的 reducer 成 一 个 根 reducer 
const rootReducer = combineReducers ({ 

app, 

auth, 

zy 

Postsy 

comments, 

users 


]) 7 


export default rootReducer; 
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9.4 连接 Redux 


Redux 模块 准备 好 了 ， 下 面 就 可 以 通过 Redux 的 connect 函数 把 组 件 和 Redux 的 store 进行 连 
接 了 。 我 们 以 组 件 PostList 为 例 介 绍 连 接 过 程 。 


9.4.1 注入 state 


PostList 组 件 需要 从 Redux 的 store 中 获取 以 下 数据 : 当前 登录 用 户 、 帖 子 列表 数据 和 新 建 帖 
子 编辑 框 的 UI 状态 ， 根 据 store 中 state 的 结构 ， 一 种 最 直接 的 获取 所 需 数 据 的 方式 如 下 : 


// containers/PostList/index.js 


const getPostList = state => { 
return state.posts.allIds.map(id => { 
return state.posts.byId[id]; 
1); 
}3 


const mapStateToProps = state => { 
return { 
user: state.auth, // 当 前 登录 用 户 
posts: getPostList (state)， // 帖 子 列表 数据 
isaddDialogopen: state.ui.addDialogopen  // 新 建 帖子 编辑 框 的 UI 状态 
Fs 
] 


user 和 isAddDialogOpen 两 个 属性 可 以 直接 从 state 中 获取 ， 但 这 种 获取 方式 意味 着 组 件 必 须 
了 解 state 的 结构 ， 而 且 state 结构 发 生变 化 时 , 组 件 也 必须 通过 新 的 state 结构 访问 使 用 的 属性 。 总 
之 , container 层 和 Redux 的 module 层 有 了 强 耦 合 。 良 好 的 模块 设计 对 外 暴露 的 应 该 是 模块 的 接口 ， 
而 不 是 模块 的 具体 结构 。 我 们 可 以 利用 Redux 中 的 selector 解决 这 个 问题 。selector 是 一 个 函数 ， 
用 于 从 state 中 获取 外 部 组 件 所 需 的 数据 。 这 样 ， 当 组 件 需要 使 用 state 中 的 数据 时 ， 不 再 直接 访问 
state， 而 是 通过 selector 获取 。 上 面 示例 中 的 getPostList 就 是 一 个 selector， 但 selector 适合 定义 在 
相关 Redux 模块 中 , 即 一 个 Redux 模块 不 仅 包含 action types、action creators 和 reducers， 还 包含 从 
该 模块 state 中 获取 数据 的 selectors。 

我 们 在 auth 模块 中 定义 获取 当前 用 户 的 selector: 


// redux/modules/auth.js 


// selectors 


export const getLoggedUser = state => state.auth; 
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在 模块 中 定义 获取 新 建 帖子 编辑 框 的 UI 状态 的 selector: 


// redux/modules/ui.js 


// selectors 
export const isAddDialogOpen = state => { 
return state.ui.addDialogOpen; 


}; 


当 需 要 以 多 个 模块 的 state 作为 selector 的 输入 时 ， 这 个 selector 就 不 再 适合 定义 在 某 个 具体 模 
块 中 ， 这 种 情况 下 ， 我 们 定义 到 redux/module/index.js 中 。 例 如 ，posts 模块 的 state 只 包含 作者 的 
ID 信息， 但 当 展 示 帖 子 列表 时 ， 需 要 显示 的 是 作者 的 用 户 名 ， 而 作者 信息 需要 从 users 模块 获取 ， 
因此 获取 帖子 列表 的 selector 就 应 该 定义 在 redux/module/index.jjs 中 ， 代 码 如 下 : 


// redux/modules/index.js 
import { getPostIds, getPostById } from "./posts"; 


import { getUserById } from "./users"; 


export const getPostListWithAuthors = state => { 
// 通过 posts 模块 的 getPostIds 获取 所 有 帖子 的 id 
const postIds = getPostIds (state) 7 
return postIds .map(id => { 
// 通过 posts 模块 的 getPostById 获取 每 个 帖子 的 详情 
const post = getPostById(state, id); 
// users 模块 的 getUserById 获取 作者 信息 ， 并 将 作者 信息 合并 到 post 对 象 中 
return { ...post, author: getUserById(state, post.author) }; 
Ds 
}; 


注意 , getPostListWithAuthors 中 还 使 用 到 了 posts 模 块 和 users 模 块 的 selectors。 这 样 通过 selector 
进行 一 些 逻 辑 的 处 理 和 数据 结构 的 转换 ， 容 器 组 件 可 以 更 加 便利 地 使 用 全 局 state 中 的 数据 。 最终， 
PostList 注入 state 的 代码 如 下 : 


// containers/PostList/index.js 

import { getLoggedUser } from "../../redux/modules/auth"; 
import { isAddDialogOpen } from "../../redux/modules/ui"; 
import { getPostListWithAuthors } from "../../redux/modules"; 


const mapStateToProps = (state, props) => { 
return { 
user: getLoggedUser (state), 
posts: getPostListWithAuthors (state), 
isAddDialogOpen: isAddDialogOpen (state) 
}; 
] 7 
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9.4.2 注入 action creators 


接 下 来 为 PostList 注入 使 用 到 的 action creators。PostList 中 需要 获取 帖子 列表 、 新 建 帖 子 ， 还 
需要 控制 新 建 帖子 编辑 框 的 UI 状态 ， 因 此 ，PostList 需要 使 用 到 posts 和 ui 两 个 模块 中 的 action 
creators， 代 码 如 下 : 


// containers/PostList/index.js 
import { bindActionCreators } from "redux"; 
import { actions as postActions } from "../../redux/modules/posts"; 


import { actions as uiActions } from "../../redux/modules/ui"; 


const mapDispatchToProps = dispatch => { 
return { 
.. .bindActionCreators (postActions, dispatch), 


.. .bindActionCreators (uiActions, dispatch) 
}; 
}; 
其 中 ，bindActionCreators 是 Redux 提供 的 一 个 工具 函数 ， 它 使 用 store 的 dispatch 方法 把 参数 
对 象 中 包含 的 每 个 action creator 包 庄 起 来 ,这样 就 不 需要 显 式 地 使 用 dispatch 方法 去 发 送 action 了 ， 
而 是 可 以 直接 调用 action creator 函数 (bindActionCreators 返回 的 对 象 的 属性 就 是 可 以 直接 调用 的 
action creator) 。 例 如 ， 不 使 用 bindActionCreators 时 ， 有 一 个 如 下 定义 的 mapDispatchToProps: 


const mapDispatchToProps = dispatch => { 
return 1{ 
someActionCreator: someActionCreator, 


}; 
}; 
在 组 件 中 发 起 对 应 的 action 需要 这 样 调用 : 


this.props.dispatch (this.props.someActionCreator ()) 7 


mapDispatchToProps 使 用 bindActionCreators 后 : 


const mapDispatchToProps = dispatch => { 


return { 
someActionCreator: bindActionCreators (someActionCreator, dispatch), 


}; 
}; 
只 需要 这 样 调用 即 可 发 送 action: 
this.props.someActionCreator (); 


注意 ，bindActionCreators 的 第 一 个 参数 可 以 是 一 个 函数 或 者 一 个 普通 对 象 ， 如 果 是 函数 类 型 ， 
这 个 函数 就 是 一 个 action creator; 如 果 是 普通 对 象 类 型 ,对象 的 每 一 个 属性 就 是 一 个 action creator。 
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9.4.3 ”connect 连接 PostList 和 Redux 
最 后 ， 利 用 Redux 的 connect 函数 将 PostList 和 Redux 连接 起 来 ， 并 导出 连接 后 的 组 件 : 


// containers/PostList/index.js 


import { connect } from "react-redux"; 


export default connect (mapStateToProps, mapDispatchToProps) (PostList); 
完整 的 containers/PostList/index.js 代码 如 下 : 


import React, { Component } from "react"; 

import bindActionCreators } from "redux"; 

import connect } from "react-redux"; 

import PostsView from "./components/PostsView"; 

import PostEditor from "../Post/components/PostEditor"; 

import getLoggedUser } from "../../redux/modules/auth"; 

import actions as postActions } from "../../redux/modules/posts"; 
import actions as uiActions, isAddDialogOpen } from "../../redux/ 


modules/ui"; 





import getPostListWithAuthors } from "../../redux/modules"; 


import "./style.css"; 


class PostList extends Component { 
componentDidMount() { 
this.props.fetchAllPosts(); // 获取 帖子 列表 


// 保存 帖子 
handleSave = data => { 

this.props.createPost (data.title, data.content); 
}; 


// 取消 新 建 帖子 

handleCancel = () => { 
this.props.closeAddDialog (); 

] 7 


// 新 建 帖子 

handleNewPost = () => { 
this.props.openAddDialog (); 

}; 


render() { 


const { posts, user, isAddDialogOpen } = this.props; 
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return ( 
<div className="postList"> 
<div> 
<h2> 帖 子 列表 </h2> 
{user.userId ? ( 
<button onClick={this.handleNewPost}> 发 帖 </button> 
) : null} 
</div> 
{isAddDialogopen ? ( 
<PostEditor onSave={this.handleSave} onCancel={this.handleCancel} /> 
Ll} 
<PostsView posts={posts}/> 
</div> 
) 7 
} 
} 
const mapStateToProps = (state, props) => { 
return { 
user: getLoggedUser (state), 
posts: getPostListWithAuthors (state), 
isAddDialogOpen: isAddDialogOpen (state) 
$+ 
}; 
const mapDispatchToProps = dispatch => { 
return 1{ 
.. .bindActionCreators (postActions, dispatch), 
.. .bindActionCreators (uiActions, dispatch) 
] 
}; 
export default connect (mapSstateToProps, mapDispatchToProps) (PostList); 
其 他 容器 组 件 和 Redux 的 连接 方式 与 PostList 相同 ,区 别 只 是 注入 的 state 和 action creators 不 
同 。 限 于 篇 幅 ， 这 里 不 再 一 一 介绍 。 
最 后 ， 我 们 还 需要 把 Redux 的 store 通过 Provider 组 件 注 入 应 用 中 ， 这 个 操作 在 应 用 的 根 组 件 
中 完成 : 


// index.js 


import React from "react"; 
import ReactDOM from "react-dom"; 


import { Provider } from "react-redux"; 
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import configureStore from "./redux/configurestore"; 
import App from "./containers/App"; 
// 创建 store 


Const store = configureStore(); 


ReactDOM.render( 
{/* 通过 Provider 注入 store */} 
<Provider store={store}> 
<App /> 
</Provider>, 
document .getElementById("root" 
); 


大 功 告 成 ! 完整 的 代码 可 参考 源 代码 。 
9.5 ”Redux 调试 工具 


Redux DevTools 是 一 款 用 于 调试 Redux 应 用 的 浏览 器 插件 , 它 可 以 实时 地 显示 当前 应 用 的 state 
信息 、action 触发 的 记录 以 及 state 的 变化 ， 在 开发 过 程 中 非常 有 用 。 目 前 ， 这 个 插件 支持 Chrome 
和 FireFox 浏览 器 。 以 Chrome 浏览 器 为 例 , 可 以 在 Chrome 的 应 用 商店 中 下 载 安装 Redux DevTools 
插件 。 然 后 在 configureStorejs 中 ， 使 用 Redux DevTools 创建 “加 强 版 ”的 store: 


import { createSstore, applyMiddleware, compose } from "redux"; 
import thunk from "redux-thunk"; 


import rootReducer from "./modules"; 


let finalCreatestore; 
// 如 果 程序 运行 在 非 生产 模式 下 ， 且 浏览 器 安装 了 调试 插件 ， 则 创建 包含 调试 插件 的 store 
if (process.env.NODE ENV !== "Production”&& 
window. REDUX DEVTOOLS EXTENSION ) { 
finalCreateStore = compose( 
applyMiddleware (thunk) ， 
window._REDUX_DEVTOOLS_EXTENSION _() 
) (createStore) 7 
} else { 


finalCreateStore = applyMiddleware (thunk) (CreateStore) 7 


export default function configureStore (initialState) { 
const store = finalCreateStore (rootReducer, initialstate); 


return store; 
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注意 , 我 们 只 在 开发 环境 下 启用 Redux DevTools。 运 行程 序 ， 打开 Chrome 浏览 器 的 开发 者 工 
具 窗 口 ， 选 择 Redux 标签 页 ， 即 可 看 到 Redux DevTools 的 效果 ， 如 图 9-3 所 示 。 


下 ER EEC 














Feect App 


图 9-3 


除了 安装 浏览 器 插件 的 方式 外 ， 还 可 以 直接 在 项 目 中 集成 Redux 的 调试 工具 ， 具 体 方式 可 参 
考 https://www.npmjs.com/package/redux-devtools， 这 里 不 再 展开 介绍 。 


9.6 ”性 能 优化 


Redux 使 数据 流动 变 得 清晰 ， 但 目前 我 们 的 项 目 中 还 存在 一 些 不 必要 的 状态 重复 计算 和 UI 重 
复 泻 染 。 下 面 将 对 程序 性 能 做 进一步 优化 。 


9.6.1 React Router 引起 的 组 件 重复 泻 染 问题 


Redux 和 React Router 集成 使 用 时 ， 容 易 碰 到 一 个 很 隐蔽 的 性 能 问题 。 先 来 看 一 下 组 件 app 的 
代码 : 


import React, { Component } from "react"; 

import { BrowserRouter as Router, Route, Switch } from "react-router-dom"; 
import { bindActionCreators } from "redux"; 

import { connect } from "react-redux"; 

import asyncComponent from "../../utils/AsyncComponent"; 


import ModalDialog from "../../components/ModalDialog"; 


import Loading from "../../components/Loading"; 


import { actions as appActions, getError, getRequestQuantity } from 


.-/../redux/modules/app"; 


// 异步 加 载 Home 组 件 


const AsyncHome = asyncComponent (() => import("../Home")); 
// 异步 加 载 Login 组 件 
const AsyncLogin = asyncComponent(() => import("../Login")); 


class App extends Component { 
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render() { 
const { error, requestQuantity } = this.props; 
const errorDialog = error && ( 
<ModalDialog onClose={this.props.removeError}> 
{error.message || error} 
</ModalDialog> 
); 


return ( 
<div> 
<Router> 
<Switch> 
<Route exact path="/" component={AsyncHome} /> 
<Route path="/login" component={AsyncLogin} /> 
<Route path="/posts" component={AsyncHome} /> 
</Switch> 
</Router> 
{errorDialog} 
{requestQuantity > 0 && <Loading />} 
</div> 
ys 


} 


const mapStateToProps = (state, props) => { 
return { 
error: getError(state), 
requestQuantity: getRequestQuantity (state) 


] 
] 
const mapDispatchToProps = dispatch => { 


return { 
.. .bindActionCreators (appActions, dispatch) 


}; 
export default connect (mapStateToProps, mapDispatchToProps) (App); 


app 中 既 使 用 到 React Router 的 Route, 又 使 用 到 从 Redux store 中 获取 的 error 和 requestQuantity 
两 个 状态 。 帖 子 列表 组 件 PostList 在 发 送 获取 帖子 列表 数据 的 action 时 ， 会 改变 requestQuantity 的 
值 , 这 时 候 app 的 render 方法 会 再 次 被 调用 , 这 是 正常 的 情况 , 但 Route 中 定义 的 组 件 ( 比 如 Home， 
实际 上 是 组 件 AsyncHome，AsyncHome 中 演 染 了 组 件 Home) 的 render 方法 也 会 被 再 次 调用 。 再 
来 看 一 下 组 件 Home 的 代码 : 


190 第 3 篇 ”实战 篇 一 一 在 大 型 Web 应 用 中 使 用 React 





import React, { Component } from "react"; 
import { Route } from "react-router-dom"; 
import { bindActionCreators } from "redux"; 
import { connect } from "react-redux"; 


import Header from "../../components/Header"; 


import asyncComponent from "../../utils/AsyncComponent"; 
import { actions as authActions, getLoggedUser } from "../../redux/modules/ 


auth"; 


// 异步 加 载 Post 组 件 
const AsyncPost = asyncComponent (() => import("../Post")); 
// 异步 加 载 PostList 组 件 


const AsyncPostList = asyncComponent(() => import("../PostList")); 


class Home extends Component { 


// 省 略 其 余 代 码 


const mapStateToProps = (state, props) => { 
return { 


user: getLoggedUser (state) 
}; 


const mapDispatchToProps = dispatch => { 
return 1{ 
.. .bindActionCreators (authActions, dispatch) 
] 
】} 


export default connect (mapStateToProps, mapDispatchToProps) (Home) 


Home 也 是 一 个 容器 组 件 , 它 使 用 到 Redux store 中 的 状态 user, 当 requestQuantity 发 生变 化 时 ， 
从 store 中 获取 的 user 还 是 原来 的 对 象 ， 也 就 是 说 Home 的 mapStateToProps 新 返回 的 对 象 和 之 前 
的 对 象 符合 浅 比较 (shallow comparison) 相等 的 条 件 , 根据 8.3.4 小 节 的 介绍 ，Home 组 件 的 render 
方法 不 应 该 被 再 次 调用 。 

这 个 问题 的 根 结 在 于 React Router 的 Route 组 件 。 下面 是 Route 的 部 分 源码 (注意 注释 部 分 ) : 


componentWillReceiveProps (nextProps, nextContext) { 


// 省 略 部 分 代码 


// 注意 这 里 ，computeMatch 每 次 返回 的 都 是 一 个 新 对 象 ， 如 此 一 来 ， 每 次 Route 更 新 ， 
//componentWillReceiveProps 被 调用 ，setstate 都 会 重新 设置 一 个 新 的 match 对 象 
this.setstatel({ 
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match: this.computeMatch (nextProps, nextContext.router) 


}) 


render() { 


const { match } = this.state 

const { children, component, render } = this.props 

const { history, route, staticContext } = this.context.router 
const location = this.props.location || route.location 

// 注意 这 里 ， 这 是 传递 给 Route 中 的 组 件 的 属性 

const props = { match, location, history, staticContext } 


if (component) 


return match ? React.createElement (component, props) : null 


if (render) 


return match ? render(props) : null 


if (typeof children === 'function') 


return children (props) 


if (children && !isEmptyChildren (children)) 


return React.Cchildren.only(children) 


return null 


} 
app render 方法 的 执行 会 导致 Route 的 componentWillReceiveProps 执行 ， 


componentWillReceiveProps 每 次 都 会 调用 setState 设置 match，match 由 computeMatch 计算 而 来 ， 
computeMatch 每 次 都 会 返回 一 个 新 的 对 象 。 这 样 ， 每 次 Route 更 新 (componentWillReceiveProps 
被 调用 ) 都 将 创建 一 个 新 的 match， 而 这 个 match 又 会 作为 props 传递 给 Route 中 定义 的 组 件 。 于 
是 ，Home 组 件 在 更 新 阶段 总 会 收 到 一 个 新 的 match 属性 ，react-redux 既 会 比较 组 件 依 赖 的 state 的 
变化 ， 又 会 比较 组 件 接收 的 props 的 变化 ， 这 种 情况 下 ，props 总 是 改变 的 ， 组 件 的 render 方法 被 
重新 调用 。 事实 上 , 在 上 面 的 情况 中 , Route 传递 给 Home 的 其 他 属性 location、 history、 staticContext 
都 没有 改变 ，match 虽然 是 一 个 新 对 象 ， 但 对 象 的 内 容 并 没有 改变 (一 直 处 在 同一 页 面 ，URL 并 没 
有 发 生变 化 ，match 的 计算 结果 自然 也 没有 变 ) 。 


我 们 可 以 通过 创建 一 个 高 阶 组 件 在 高 阶 组 件 内 重 写 组 件 的 shouldComponentUpdate 方法 , 如 果 


Route 传递 的 location 属性 没有 发 生变 化 (表示 处 于 同一 页 面 )， 就 返回 false， 从 而 阻止 组 件 继续 
更 新 。 然 后 使 用 这 个 高 阶 组 件 包 囊 每 一 个 要 在 Route 中 使 用 的 组 件 。 


新 建 一 个 高 阶 组 件 connectRoute: 


import React from "react"; 
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export default function connectRoute (WrappedComponent) { 
return class extends React.Component { 
shouldComponentUpdate (nextProps) { 


return nextProps.location !== this.props.location; 


render() { 
return <WrappedComponent {...this.props} />; 
} 
}; 
} 


用 connectRoute 包 于 Home、Login: 


import React, { Component } from "react"; 

import { BrowserRouter as Router, Route, Switch } from "react-router-dom"; 

import { bindActionCreators } from "redux"; 

import { connect } from "react-redux"; 

import asyncComponent from "../../utils/AsyncComponent"; 

import ModalDialog from "../../components/ModalDialog"; 

import Loading from "../../components/Loading"; 

import { actions as appActions, getError, getRequestQuantity } from 
"../../redux/modules/app"; 


import connectRoute from "../../utils/connectRoute"; 


// connectRoute 包 庄 Home 
const AsyncHome = connectRoute (asyncComponent (() => import("../Home"))); 
// connectRoute 包裹 Login 


const RsyncLogin = connectRoute (asyncComponent (() => import("../Login"))); 


class App extends Component { 


Lf 


const mapStateToProps = (state, props) => { 
return { 
error: getError(state), 


requestQuantity: getRequestQuantity(state) 
}; 
const mapDispatchToProps = dispatch => { 


return { 


.. -bindActionCreators (appActions, dispatch) 
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}; 
}; 


export default connect (mapStateToProps, mapDispatchToProps) (App); 


这 样 ,app 依赖 的 store 中 的 state 改变 就 不 会 再 导致 Route 内 组 件 的 render 方法 的 重新 执行 了 。 
其 他 使 用 到 Route 的 容器 组 件 中 也 需要 做 同样 的 处 理 。 

我 们 再 来 思考 一 种 场景 ， 如 果 app 使 用 的 store 中 的 state 同样 会 影响 到 Route 的 属性 ， 比 如 
requestQuantity 大 于 0 时 ，Route 的 path 会 改变 ,假设 变 成 <Route path="/home/fetching" 
component={AsyncHome} />, 而 Home 内 部 假设 又 需要 用 到 Route 传递 的 path( 通 过 props.match.path 
获取 ) ， 这 时 候 就 需要 Home 组 件 重新 render 。 但 因为 在 高 阶 组 件 connectRoute 的 
shouldComponentUpdate 中 ,我们 只 是 根据 location 做 判断 ， 此 时 的 location 依然 没有 发 生变 化 ， 导 
致 Home 并 不 会 重新 泻 染 。 这 是 一 种 很 特殊 的 场景 ， 但 是 想 通 过 这 种 场景 告诉 大 家 ， 高 阶 组 件 
connectRoute 中 shouldComponentUpdate 的 判断 条 件 需要 根据 实际 业务 场景 做 决策 。 绝 大 部 分 场景 
下 ， 上 面 的 高 阶 组 件 是 足够 使 用 的 。 

另外 ，React Router 的 这 个 问题 并 不 是 只 和 Redux 一 起 使 用 时 才 会 遇 到 ， 当 和 MobX 一 起 使 用 
或 Route 内 使 用 的 组 件 继承 自 React 的 PureComponent 时 ， 也 存在 同样 的 问题 。 


9.6.2 Immutable.JS 

Redux 的 state 必须 是 不 可 变 对 象 , reducer 中 每 次 返回 的 state 都 是 一 个 新 对 象 。 为 了 保证 这 一 
点 ,我 们 需要 写 一 些 额 外 的 处 理 逻 辑 ， 例 如 使 用 Objectassign 方法 或 ES6 的 扩展 运算 符 (...) 创建 
新 的 state 对 象 。 

Immutable.JS 的 作用 在 于 以 更 加 高 效 的 方式 创建 不 可 变 对 象 , 主要 优点 有 3 个 : 保证 数据 的 不 
可 变 、 丰 富 的 API 和 优异 的 性 能 。 


1. 保证 数据 的 不 可 变 


通过 Immutable.JS 创建 的 对 象 在 任何 情况 下 都 无 法 被 修改 ， 这 样 就 可 以 防止 由 于 开发 者 的 粗 
心 大 意 导 致 直接 修改 了 Redux 的 state。 


2. 丰富 的 API 


Immutable.JS 提供 了 丰富 的 API 创建 不 同类 型 的 不 可 变 对 象 ， 如 Map、List、Set、Record 等 ， 
它 还 提供 了 大 量 API 用 于 操作 这 些 不 可 变 对 象 ， 如 get、set、sort、filter 等 。 


3. 优异 的 性 能 


一 般 情况 下 ， 使 用 不 可 变 对 象 会 涉及 大 量 的 复制 操作 ， 给 程序 性 能 带 来 影响 。Immutable.JS 在 
这 方面 做 了 大 量 优化 ， 将 使 用 不 可 变 对 象 带 来 的 性 能 损耗 降低 到 可 以 忽略 不 计 。 
使 用 Immutable.JS 前 ， 需 要 先 在 项 目 根 路 径 下 安装 这 个 依赖 : 


npm install immutable 


然后 ， 就 可 以 在 项 目 中 使 用 Immutable.JS 了 ， 下 面 是 一 个 简单 示例 : 
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import Immutable from "immutable"7 


const mapl = Immutable.Map({ a: 1, b: 2, c: 3 }); 

const map2 = mapl.set('b', 50); 

const map3 = mapl.merge({b: 100}); 

mapl.get('b') + "vs. "+ map2.get('b') + "vs. "+map3.get('b'); // 2 vs. 
50 vs. 100 


我 们 先 使 用 Immutable.JS 的 Map API 创建 了 一 个 Map 结构 的 不 可 变 对 象 map1， 然 后 分 别 使 
用 set\ merge 方法 修改 map1l, 最 后 通过 get 方法 从 不 可 变 对 象 中 取出 b 的 值 , 输出 表明 , set、 merge 
并 没有 修改 原 有 的 mapl 对 象 ， 而 是 创建 了 一 个 新 的 对 象 。 这 就 是 Inmutable.JS 的 最 大 特征 ， 对 象 
一 旦 创建 ， 就 无 法 再 次 修改 。 关 于 Immutable.JS 完整 的 API 介绍 可 参考 官方 文档 : 
https://facebook.github.io/immutable-js/。 

当 Immutable.JS 和 Redux 一 起 使 用 时 ,需要 通过 Immutable.JS 的 API 创建 Redux 的 全 局 state， 
reducer 中 通过 Immutable.JS 的 API 修改 state。 我 们 以 BBS 项 目 中 的 posts 模块 为 例 详细 介绍 如 何 
引入 Immutable.JS。 


(1) 用 Immutable.JS 创建 模块 使 用 的 初始 state: 


import Immutable from "immutable"; 


const initialState = Immutable.fromJS ({ 
allIds: []， 
byId: {} 

DD); 


posts 模块 中 的 每 一 个 reducer 设置 state 默认 值 的 方式 也 需要 修改 : 


const allIds = (state = initialstate.get ("allIds"), action) => { 
1 ans 
}; 


const byId = (state = initialstate.get ("byId"), action) => { 
I/ ..- 
}; 


(2) 当 reducer 接收 到 action 时 ，reducer 内 部 也 需要 通过 Immutable.JS 的 API 来 修改 state， 
代码 如 下 : 


const allIds = (state = initialstate.get ("alllIds"), action) => { 
Switch (action.type) { 
Case types.FETCH ALL POSTS: 
// Immutable.List 创建 一 个 List 类 型 的 不 可 变 对 象 
return Immutable.List(action.postIds); 
Case types.CREATE POST: 


// 使 用 unshift 向 List 类 型 的 state 增加 元 素 
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return state.unshift(action.post.id); 
default: 
return state; 
} 
}; 


const byId = (state = initialState.get ("byId"), action) => { 
switch (action.type) { 
Case types.FETCH ALL POSTS: 
// 使 用 merge 合并 获取 到 的 post 列表 数据 
return state.merge(action.posts); 
Case types.FETCH POST: 
Case types.CREATE POST: 
Case types.UPDATE POST: 
// 使 用 merge 修改 对 应 post 的 数据 
return state.merge({ [action.post.id]: action.post }); 
default: 
return state; 
} 
}; 

(3) 引入 redux-immutable。 之 前 使 用 Redux 提供 的 combineReducers 函数 合并 reducer， 但 
combineReducers 只 能 识别 普通 JavaScript 对 象 组 成 的 state， 无 法 识别 Immutable.JS 创建 的 对 象 组 
成 的 state。 我 们 可 以 使 用 redux-immutable 这 个 库 提供 的 combineReducers 解决 这 个 问题 。 先 在 项 
目 中 安装 redux-immutable: 


npm install redux-immutable 
使 用 redux-immutable 的 combineReducers 合并 reducer: 
import { combineReducers } from "redux-immutable"; 
const reducer = combineReducers ({ 

allIds, 


byId 
1 


export default reducer; 


(4) 修改 selectors， 让 selectors 返回 Immutable.JS 类 型 的 不 可 变 对 象 : 


// selectors 


export const getPostIds = state => state.getIin(["posts", "allIlds"]); 


export const getPostList = state => state.getIin(["posts", "byId"]); 
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export const getPostById = (state id) => state.getIn(["posts", "byId", id]); 


修改 selectors 时 ， 不 要 忘记 redux/module/index.js 中 定义 的 复杂 selectors 同样 需要 修改 ， 因 为 
这 部 分 修改 相对 复杂 些 ， 这 里 给 出 修改 后 的 代码 : 


import { getCommentIdsByPost, getCommentById } from "./comments"; 
import { getPostIds, getPostById } from "./posts"; 


import { getUserById } from "./users"; 


// 获取 包含 完整 作者 信息 的 帖子 列表 
export const getPostListWithAuthors = state => { 
const allIds = getPostIds (state) 7 
return allIds.map(id => { 
const post = getPostById(state, id); 
return post.merge({ author: getUserById(state, post.get ("author")) }); 


// 获取 帖子 详情 
export const getPostDetail = (state, id) => { 
const post = getPostById(state, id); 
return post 
? post.merge({ author: getUserById(state, post.get ("author")) }) 
: null; 
js 


// 获取 包含 完整 作者 信息 的 评论 列表 
export const getCommentsWithAuthors = (state, post1Id) => { 
const commentIds = getCommentIdsByPost (state, postId); 
if (commentIds) { 
return commentIds.map(id => { 
const comment = getCommentById(state, id); 
return comment.merge({ author: getUserByIdl(state, 
comment .get ("author"™")) }); 
Ds; 
} else { 
return Immutable.List(); 
} 
ja 


这 里 省 略 了 comments 和 users 模块 中 新 版 本 selectors 的 定义 。 
(5) 在 容器 组 件 PostList 中 使 用 新 版 本 的 selectors: 


import { getLoggedUser } from "../../redux/modules/auth"; 





import { isAddDialogOpen } from "../../redux/modules/ui"; 
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import { getPostListWithAuthors } from "../../redux/modules"; 
Const mapStateToProps = (state, props) => { 
return { 


user: getLoggedUser (state), 
posts: getPostListWithAuthors (state), 
isAddDialogOpen: isAddDialogOpen (state) 
$ 
La 
因为 mapStateToProps 返回 的 对 象 的 属性 是 Immutable.JS 类 型 的 不 可 变 对 象 , 所 以 在 容器 组 件 
中 使 用 时 ， 也 需要 通过 Immutable.JS 的 API 获取 不 可 变 对 象 中 的 属性 值 。 但 展示 组 件 应 该 是 对 
Immutable.JS 的 使 用 无 感知 的 , 也 就 是 容器 组 件 需要 把 Immutable.JS 类 型 的 不 可 变 对 象 转换 成 普通 
JavaScript 对 象 后 ， 再 传递 给 展示 组 件 使 用 《和 否则 展示 组 件 复 用 时 ， 还 必须 捆绑 Inmutable.JS) 。 
主要 的 变化 发 生 在 containers/PostList/index.js 的 render 方法 中 : 


render() { 
const { posts, user, isAddDialogOpen } = this.props; 
const rawPosts = posts.toJS(); // 转换 成 普通 Javascript 对 象 
return ( 
<div className="postList"> 
<div> 
<h2> 帖 子 列表 </h2> 
{user.get ("userId") ? ( 
<button onClick={this.handleNewPost}> 发 帖 </button> 
) : null} 
</div> 
{isAddDialogopen ? ( 
<PostEditor onSave={this.handleSave} onCancel={this.handleCancel} /> 
) : null} 
<ul> 
{rawPosts.map(item => ( 
<Link key={item.id} to={ /posts/Sfitem.id} }> 
<PostItem post={item} /> 
</Link> 
))} 
</ul> 
</div> 
); 
} 


不 可 变 对 象 posts 先 通 过 toJS 方法 转换 成 普通 的 JavaScript 对 象 ， 然 后 才 提供 给 展示 组 件 
PostItem 使 用 。 
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【 少 不 要 在 mapStateToProps 中 使 用 toJSO 将 Immutable.JS 类 型 的 不 可 变 对 象 转 换 成 普通 

JavaScript 对 象 。 因 为 toJSO 每 次 返回 的 都 是 一 个 新 对 象 ， 这 将 导致 Redux 每 次 使 用 浅 
比较 判断 mapStateToProps 返回 的 对 象 是 否 改变 时 ,都 认为 发 生 了 修改 ， 从 而 导致 不 必 
要 的 重复 调用 组 件 的 render 方法 。 


至 此 ， 我 们 就 完成 了 posts 模块 使 用 Immutable.JS 的 重 构 ， 其 他 模块 的 修改 可 参考 源 代码 : 
/chapter-09/bbs-redux-immutable。 

通过 这 些 修 改 可 以 发 现 使 用 Immutable.JS 也 有 一 些 缺 点 , 例如 ， Immutable.JS 创建 的 对 象 难以 
和 普通 JavaScript 对 象 混合 使 用 ; 操作 Immutable.JS 对 象 也 不 是 很 便捷 ， 必 须 使 用 其 提供 的 API 完 
成 ; Immutable.JS 对 象 由 于 其 特殊 的 结构 ， 因 此 调试 起 来 也 更 为 麻烦 。 当 项 目的 state 数据 结构 并 
不 是 很 复杂 时 ， 使 用 Immutable.JS 带 来 的 性 能 提升 并 不 显著 ， 所 以 读者 可 根据 项 目 实际 情况 有 选 
择 性 地 使 用 Immutable.JS。 


9.6.3 Reselect 


我 们 知道 ，Redux state 的 任意 改变 都 会 导致 所 有 容器 组 件 的 mapStateToProps 的 重新 调用 ， 进 
而 导致 使 用 到 的 selectors 重新 计算 。 但 state 的 一 次 改变 只 会 影响 到 部 分 selectors 的 计算 值 ， 只 要 
这 个 selector 使 用 到 的 state 的 部 分 未 发 生 改变 ，selector 的 计算 值 就 不 会 发 生 改 变 ， 理 论 上 这 部 分 
计算 时 间 是 可 以 被 节省 的 。 

先 来 看 一 下 之 前 用 来 获取 帖子 列表 的 selector: 


import { getPostIds, getPostById } from "./posts"; 


import { getUserById } from "./users"; 


export const getPostListWithAuthors = state => { 
const allIds = getPostIds (state); 
return allIds.map(id => { 
const post = getPostById(state, id); 
return post.merge ({ author: getUserById(state, post.get ("author")) }); 
1); 
}; 
getPostListWithAuthors 需要 根据 posts 模块 和 users 模块 的 state 计算 出 容器 组 件 PostList 所 需 
格式 的 对 象 。 当 其 他 模块 的 state 发 生 改 变 时 ， 例 如 ui 模块 的 编辑 框 状态 发 生变 化 ，PostList 的 
mapStateToProps 会 被 重新 调用 ，getPostListWithAuthors 也 就 被 重新 调用 ， 但 这 种 场景 下 ， 
getPostListWithAuthors 的 计算 结果 并 不 会 发 生 改变 , 完全 可 以 不 必 重 新 计算 ， 而 是 直接 使 用 上 次 的 
计算 结果 即 可 。 
Reselect 正 是 用 来 解决 这 类 问题 的 。Reselect 可 以 创建 具有 记忆 功能 的 selectors， 当 selectors 
计算 使 用 的 参数 未 发 生 改 变 时 ， 不 会 再 次 计算 ， 而 是 直接 使 用 上 次 缓存 的 计算 结果 。 
现在 , 我 们 把 getPostListWithAuthors 改造 成 具有 记忆 功能 的 selector。 首 先 ， 需 要 安装 reselect 库 : 


npm install reselect 
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Reselect 提供 了 一 个 函数 createSelector 用 来 创建 具有 记忆 功能 的 selector。createSelector 的 定 
义 如 下 : 


createSelector([inputSelectors], resultFunc) 


它 接收 两 个 参数 ， 第 一 个 参数 [inputSelectors] 是 数组 类 型 ， 数 组 的 元 素 是 selector， 第 二 个 参数 
resultFunc 是 一 个 转换 函数 ，[inputSelectors] 中 每 一 个 selector 的 计算 结果 都 会 作为 参数 传递 给 
resultFunc。createSelector 的 返回 值 是 一 个 具有 记忆 功能 的 selector， 这 个 selector 每 次 被 调用 时 ， 
使 用 运算 符 (一 =) 判断 [inputSelectors] 中 的 selector 计算 结果 相 较 前 一 次 是 否 发 生变 化 ， 如 果 所 有 
的 selector 计算 结果 都 没有 变化 ， 就 直接 返回 前 一 次 的 计算 结果 。 改 造 后 的 getPostListWithAuthors 
如 下 : 


// redux/modules/index.js 
import { getPostIds, getPostList, getPostById } from "./posts"; 


import { getUsers } from "./users"; 


export const getPostListWithAuthors = createSelector!( 
[getPostIds, getPostList, getUsers], 
(allIds, posts, users) => { 
return allIds.map(id => { 
let post = posts.get (id); 
return post.merge ({ author: users.get (post.get ("author")) }); 
1); 
} 
); 


现在 ， 只 要 getPostIds、getPostList 和 getUsers 的 返回 值 不 变 〈 本 质 上 是 posts 和 users 模块 的 
state 没有 改变 ) ，getPostListWithAuthors 就 不 会 重新 计算 。selector 的 计算 逻辑 越 复杂 ，Redux 全 
局 state 的 改变 频率 越 高 ，Reselect 带 来 的 性 能 提升 就 越 大 。 另 外 请 注意 ， 如 果 一 个 selector 并 不 执 
行 任何 计算 逻辑 ， 只 是 单纯 地 从 state 中 读 取 属性 值 , 例如 posts 模块 中 的 getPostIds 和 getPostList， 
就 没有 必要 使 用 Reselect 进行 改造 。 本 节 项 目 源 代码 的 目录 为 /chapter-09/bbs-redux-reselect。 


9.7 本章 小 结 


本 章 结合 项 目 实例 ， 从 Redux 项 目 结构 的 组 织 方式 、state 的 设计 、Redux 模块 的 设计 等 方面 
详细 介绍 了 如 何在 真实 项 目 中 使 用 Redux。 本 章 还 讨论 了 React Router 的 使 用 引起 的 组 件 重复 泻 染 
的 问题 。 在 性 能 优化 方面 ，Immutable.JS 和 Reselect 是 最 常用 的 用 于 优化 Redux 项 目 性 能 的 两 个 
库 。Immutable.JS 和 Reselect 虽然 都 能 带 来 性 能 的 提升 ， 但 同时 也 会 增加 一 部 分 代码 的 复杂 度 ， 当 
程序 的 性 能 并 没有 问题 时 ,尤其 是 考虑 到 Redux 和 React 本 身 就 已 经 做 了 大 量 性 能 优化 的 工作 , 完 
全 可 以 不 引入 这 些 库 。 





MobX: 简单 可 扩展 的 状态 管理 解决 方案 


MobX 是 Redux 之 后 的 一 个 状态 管理 库 ， 基 于 响应 式 管理 状态 ， 整 体 是 一 个 观察 者 模式 的 架 
构 , 存储 state 的 store 是 被 观察 者 , 使 用 store 的 组 件 是 观察 者 。MobX 可 以 有 多 个 store 对 象 , store 
使 用 的 state 也 是 可 变 对 象 ， 这 些 都 是 和 Redux 的 不 同 点 ， 相 较 于 Redux，MobX 更 轻 量 ， 也 受到 
了 很 多 开发 者 的 青睐 。 


10.1 简 介 


MobX 通过 函数 响应 式 编程 的 思想 使 状态 管理 变 得 简单 和 可 扩展 。MobX 背后 的 哲学 是 : 任何 
可 以 从 应 用 程序 的 状态 中 获取 /衍生 的 数据 都 应 该 可 以 自动 被 获取 /衍生 。 和 Redux 一 样 ，MobX 也 
是 采用 单 向 数据 流 管 理 状态 :通过 action 改变 应 用 的 state, state 的 改变 进而 会 导致 受 其 影响 的 views 
更 新 ， 如 图 10-1 所 示 。 


10-1 


MobX 包含 的 主要 概念 有 4 个: state (状态 ) 、computed value 〈 计 算 值 ) 、reaction (响应) 
和 action (动作 ) 。computed value 和 reaction 会 自动 根据 state 的 改变 做 最 小 化 的 更 新 ， 并 且 这 个 
更 新 过 程 是 同步 执行 的 ， 也 就 是 说 ，action 更 改 state 后 ， 新 的 state 是 可 以 被 立即 获取 的 。 注 意 ， 
computed value 采用 的 是 延迟 更 新 ， 只 有 当 computed value 被 使 用 时 它 的 值 才 会 被 重新 计算 ， 当 
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computed value 不 再 被 使 用 时 (例如 使 用 它 的 组 件 已 经 被 印 载 ), 它 将 会 被 自动 回收 。 computed value 
必须 是 纯 函 数 ， 不 能 使 用 它 修 改 state。 


一 般 来 说 ， 驱 动 应 用 的 任何 数据 都 可 以 称 为 state (状态 ) 。 但 MobX 中 提 到 的 state 
实际 上 都 是 指 可 观测 的 state， 因 为 对 于 不 可 观测 的 state， 它 们 的 修改 并 不 会 自动 产生 
影响 ， 对 MobX 的 数据 流 来 说 是 没有 意义 的 。 


MobX 中 大 量 使 用 了 ES.Next 的 装饰 器 语法 ， 但 装饰 器 语法 目前 还 处 于 试验 阶段 ， 
create-react-app 创建 的 项 目 默认 是 不 支持 的 。 我 们 先 来 解决 这 个 问题 再 继续 介绍 MobX。 要 支持 装 
饰 器 语法 ， 可 以 使 用 npm run eject 命令 将 项 目 配 置 “ 弹 出 ”， 然 后 添加 babel-plugin-transform- 
decorators-legacy 这 个 Babel 插件 , 也 可 以 使 用 custom-react-scripts (https://www.npmijs.com/package/ 
custom-react-scripts) 来 创建 项 目 。 本 书 使 用 custom-react-scripts 这 种 方式 。 具 体 方式 为 ， 在 使 用 
create-react-app 创建 项 目 时 ， 指 定 --scripts-version 参数 的 值 为 custom-react-scripts: 


注 意 





create-react-app my-app --scripts-version custom-react-scripts 


创建 的 项 目 根 路 径 下 有 一 个 名 为 .env 的 文件 ， 这 个 文件 中 定义 了 custom-react-scripts 为 项 目 新 
增 的 特性 ， 例 如 支持 装饰 器 语法 、 支 持 Less、 支 持 Sass 等 。 打 开 这 个 文件 ， 可 以 发 现 有 一 项 配置 
是 REACT_ APP DECORATORS = tme， 这 项 配置 就 是 用 来 启用 装饰 器 语法 的 。 

另外 ， 很 多 编辑 器 遇 到 装饰 器 语法 会 提示 错误 ， 需 要 进行 额外 设置 以 支持 装饰 器 语法 。 例 如 ， 
本 书 使 用 的 VS Code 需要 在 项 目的 根 路 径 下 创建 一 个 文件 jsconfigjson， 文 件 的 内 容 为 ; 


{ 
"compilerOptions": { 
"experimentalDecorators": true 
} 
} 


现在 ， 我 们 就 可 以 在 项 目 中 随意 使 用 装饰 器 语法 了 。 

我 们 通过 todos 应 用 来 简单 介绍 这 4 个 概念 。 本 节 项 目的 源码 目录 为 /chapter-10/todos-mobx。 

MobX 可 以 使 用 object、array、class 等 任意 数据 结构 定义 可 观测 的 state。 例 如 ， 使 用 class 定 
义 一 个 可 观测 的 state Todo 代表 一 项 任务 : 


import { observable } from "mobx"; 


class Todo { 
id = Math.random(); 
@observable title = ""; 
Qobservable finished = false; 


} 


这 里 使 用 的 @observable 就 属于 装饰 器 语法 ， 你 也 可 以 不 使 用 它 ， 直 接 使 用 MobX 提供 的 函数 
定义 一 个 可 观测 的 状态 。 例 如 ， 下 面 是 用 ES 5 语法 实现 的 等 价 代 码 : 
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import { extendObservable } from "mobx"7 


function Todo() { 
this.id = Math.random(); 
extendObservable(this, { 
企 时 和 
finished: false 
1); 
} 


显然 , 使 用 装饰 器 的 代码 更 为 清晰 简洁 ，MobX 使 用 了 大 量 装 饰 器 语法 , 这 也 是 官方 推荐 的 方 
式 ， 本 书 也 是 使 用 装饰 器 语法 完成 MobX 的 项 目 代码 。 经 过 @observable 的 修饰 之 后 ，Todo 的 title 
和 finished 两 个 属性 变 成 可 观测 状态 (注意 属性 和 状态 的 概念 ， 状 态 对 象 的 属性 也 是 状态 ) ， 它 们 
的 改变 会 自动 被 观察 者 获知 。id 没有 被 @observable 修饰 ， 所 以 只 是 一 个 普通 属性 。 

基于 可 观测 的 state 可 以 创建 computed value。 例 如 ，todos 中 需要 获取 未 完成 的 任务 总 数 ， 使 
用 @computed 定义 一 个 unfinishedTodoCount 的 computed value， 计 算 未 完成 的 任务 总 数 : 


import { observable, computed } from "mobx"; 


class TodoList { 


Qobservable todos = []; 


// 根据 todos 和 todo.finished 两 个 state, 创建 computed value 
@computed get unfinishedTodoCount() { 
return this.todos.filter(todo => !todo.finished) .length; 
} 
} 


这 里 又 定义 了 一 个 新 的 state: TodoList。TodoList 的 属性 todos 是 一 个 可 观测 的 数组 ， 它 的 元 
素 是 前 面 定义 的 Todo 的 实例 对 象 。 当 todos 中 的 元 素数 量 发 生变 化 或 某 一 个 todo 元 素 的 finished 
属性 变化 时 ，unfinishedTodoCount 都 会 自动 更 新 (更 严谨 的 说 法 是 ， 在 需要 时 才 自 动 更 新 ， 后 面 
还 会 介绍 ) 。 

除了 computed value 会 响应 state 的 变化 外 , reaction 也 会 响应 state 的 变化 , 不 同 的 是 , reaction 
并 不 创建 一 个 新 值 ， 而 是 用 来 执行 有 副作用 的 逻辑 , 例如 输出 日 志 到 控制 台 、 发 送 网 络 请 求 、 根 据 
React 组 件 树 更 新 DOM 等 。mobx-react 包 提 供 了 (@observer 装饰 器 和 observer 函数 ， 可 以 将 React 
组 件 封装 成 reaction， 自 动 根据 state 的 变化 更 新 组 件 UI。 例 如 ， 创 建 TodoListView 和 TodoView 
两 个 组 件 〈 也 是 两 个 reaction) 代表 应 用 的 UI: 


import React, { Component } from 'react'; 
import ReactDOM from '‘'react-dom'; 
import { observer } from "mobx-react"; 


import { action } from "mobx"; 
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// 使 用 aobserver 装饰 器 创建 reaction 
Q@observer 
class TodoListView extends Component { 
render() { 
return ( 
<div> 
<ul> 
{this.props.todoList.todos.map(todo => ( 
<TodoView todo={todo} key={todo.id} /> 
))} 
</ul> 
Tasks left: {this.props.todoList.unfinishedTodoCount} 
</div> 
a 


// 使 用 observer 函数 创建 reaction 
const TodoView = observer(({ todo }) => { 
return ( 
<1li> 
<input 
type="checkbox" 
checked={todo.finished} 
/> 
{todo.title} 
Lis 
); 
in 


const store = new TodoList(); 
ReactDOM.render (<TodoListView todoList={store} />, 
document .getElementById('root')); 


TodoListView 使 用 到 的 可 观测 state 是 todos 和 todo.finished( 通 过 unfinishedTodoCount 间接 使 
用 ) ， 因 此 它们 的 改变 将 会 更 新 TodoListView 代表 的 DOM， 同 样 地 ，todo.finished 和 todo.title 的 
改变 会 更 新 使 用 这 个 todo 对 象 的 TodoView 代表 的 DOM。 

MobX 通过 action 改变 state。 我 们 在 TodoView 中 定义 一 个 action， 用 来 改变 todo .finish: 


const TodoView = observer(({ todo }) => { 
// 定义 action， 改变 todo.finish 
const handleClick = action(() => todo.finished = !todo.finished); 


return ( 
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<1i> 
<input 
type="checkbox" 
checked={todo.finished} 
onClick={handleClick} 
1> 
{todo.title} 
/lls 
); 
Tn 
handleClick 就 是 用 来 改变 状态 todo.finish 的 action, 一 般 习惯 使 用 MobX 提供 的 action 函数 包 
庄 应 用 中 定义 的 action。 至 此 ， 这 个 精简 版 的 todos 应 用 已 经 包含 了 MobX 涉及 的 主要 概念 。 


10.2 主要 组 成 


本 节 将 详细 介绍 MobX 的 主要 组 成 部 分 以 及 每 一 部 分 涉及 的 重要 API。 
10.2.1 state 

state 是 驱动 应 用 的 数据 ， 是 应 用 的 核心 。 同 Redux 类 似 ， 我 们 依然 可 以 把 state 分 为 三 类 : 与 
领域 直接 相关 的 领域 状态 数据 、 反 映 应 用 行为 (登录 状态 、 当 前 是 否 有 API 请 求 等 ) 的 应 用 状态 
数据 和 代表 UI 状态 的 UI 状态 数据 。 在 实际 使 用 中 ， 一 般 还 会 另外 创建 一 个 store 来 管理 state， 这 
和 Redux 中 的 store 也 是 类 似 的 。 但 MobX 中 ， 可 以 在 一 个 应 用 中 使 用 多 个 store，store 中 的 state 
也 是 可 变 的 。 另 外 ，MobX 的 state 的 结构 不 需要 做 标准 化 处 理 (Normalize) ， 可 以 有 多 层 顽 套 结 
构 ， 以 方便 UI 组 件 使 用 为 指导 原则 ， 这 也 是 和 Redux 的 state 不 同 的 地 方 。 

MobX 提供 了 observable 和 人 observable 两 个 API 创建 可 观测 的 state， 用 法 如 下 : 


observable (value) 


Qobservable classProperty = value 


这 两 个 API 几乎 可 以 用 在 所 有 的 JS 数据 类 型 上 。 但 根据 不 同类 型 的 值 创 建 出 的 可 观测 state 
的 表现 行为 是 有 不 同 点 的 : 


1. 普通 对 象 (Plain Object) 


普通 对 象 指 原型 不 存在 或 原型 是 Objectprototype 的 对 象 ， 例 如 ，var obj={"book":"react"}、var 
obj = new Object({"book":"react"}) 都 是 普通 对 象 。MobX 根据 普通 对 象 创建 一 个 可 观测 的 新 对 象 ， 
新 对 象 的 属性 和 普通 对 象 相 同 ， 但 每 一 个 属性 都 是 可 观测 的 ， 例 如 : 


import { observable, autorun } from "mobx"; 


Var person = observable({ 
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name: "Jack", 
age: 20 
]) 7 


// mobx.autorun 会 创建 一 个 reaction 自动 响应 state 的 变化 ， 后 面 将 会 介绍 
autorun (() => 
console.log(`name:$Sfperson.name}j，age:S$Sfperson.-agel ) 


) 


person.name = "Tom"; 


// 输出 : name:Tom，age:20 
Person.age = 257 
// 输出 : name:Tom，age:25 


person 的 name 和 age 属性 都 是 可 观测 的 ， 任 意 属 性 的 变化 都 会 触发 autorun 的 重新 执行 。 使 
用 @observable 可 以 将 代码 改写 如 下 : 


import { observable, autorun } from "mobx"; 
class Person { 


@observable name = "Jack"; 


Qobservable age = 20; 


Var person = new Person(); 


autorun(() => 
console.log( “name:${person.name}, age:${person.age}.) 
和 


person.name = "Tom"; 
// 输出 : name:Tom，age:20 


person.age = 25; 
// 输出 : name:Tom，age:25 
使 用 普通 对 象 转换 成 可 观测 对 象 时 ， 还 需要 注意 下 面 几 个 问题 : 


e 只 有 当前 普通 对 象 已 经 存在 的 属性 才 会 转换 成 可 观测 的 ， 后 面 添加 的 新 属性 都 不 会 自动 
变 成 可 观测 的 ， 例 如 : 


import { observable, autorun } from "mobx"; 


Var person = observable({ 
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name: "Jack", 
age: 20 
Ds; 


autorun(() => 
console.log( ‘name:${person.name}, age:${person.age}, 
address:${person.address}.) 


); 


person.address = "Shanghai"7 


// 没有 新 的 输出 


address 是 后 来 添加 的 属性 ， 它 的 改变 并 不 会 引起 autorun 的 重新 执行 。 
属性 的 getter 会 自动 转换 成 computed value， 效 果 和 使 用 @computed 相同 。 


import { observable, autorun } from "mobx"; 


Var person = observable({ 
name: "Jack", 


age: 20, 


// 自 动 转换 成 computed value 
get labelText() { 
return ‘name:${this.name}, age:${this.age}; 
3 
1D); 


autorun(() => console.log(person.labelText)); 


person.name = "Tom"; 
// 输出 : name:Tom，age:20 


person.age = 25; 

// 输出 : name:Tom，age:25 

labelText 是 一 个 getter 方法 ， 会 自动 转换 成 computed value，autorun 中 使 用 到 了 labelText 
，labelText 的 计算 值 又 依赖 于 name 和 age， 所 以 name 和 age 的 改变 会 导致 autorun 重新 
执行 。 

observable 会 递归 地 遍历 整个 对 象 ， 每 当 遇 到 对 象 的 属性 值 还 是 一 个 对 象 时 ( 不 包含 非 普 
通 对 象 ) ， 这 个 属性 值 将 会 继续 被 observable 转换 ， 例 如 : 


import { observable, autorun } from "mobx"; 


Var person = observable({ 


name: "Jack", 
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address: { 
province: "Shanghai", 
district: "Pudong" 
} 
Ds; 


autorun(() => 

console.log( ‘name:${person.name}, 
address:${JSON.stringify (person.address)}.) 
); 


person.address.district = "Xuhui"7 
// 输出 : name:Jack, address:{"province":"Shanghai","district":"xXuhui"} 


person 的 name 和 address 属性 是 可 观测 的 , address 的 值 是 一 个 对 象 , 因此 会 继续 被 observable 
处 理 ，address 的 province 和 district 属性 也 被 转换 成 可 观测 的 。 所 以 ， 当 person.address.district = 
"Xuhui" 执 行 后 ，district 的 改变 也 会 导致 autorun 的 重新 执行 。 

此 外 ， 如 果 以 后 再 给 可 观测 属性 赋 新 值 并 且 新 值 是 一 个 对 象 ( 不 包含 非 普 通 对 象 》 时 ， 新 值 
也 会 自动 被 转换 成 可 观测 的 ， 例 如 : 


import { observable, autorun } from "mobx"; 


Var person = observable({ 
name: "Jack", 
address: { 
province: "Shanghai", 
district: "Pudong" 
} 
1D); 


autorun(() => 
console.log('name:${person.name}, address:${JSON.stringify 
(person.address)}') 
); 


// 给 可 观测 属性 address 赋 新 值 
person.address = { 
province: "Beijing", 
district: "Xicheng”" 
] 7 
// 输出 : name:Jack, address:{"pFrovince":"Beijing"，"district":"Xicheng"} 


person.address.district = "Dongcheng"; 


// 输出 : name:Jack, address:{"province":"Beijing","district":"Dongcheng"} 
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person 的 address 被 赋予 一 个 新 对 象 时 ， 新 对 象 被 自动 转换 成 可 观测 对 象 ， 因 此 ， 新 对 象 的 
district 属性 发 生 改 变 后 ，autorun 依然 会 被 触发 。 


2.ES6 Map 


返回 一 个 新 的 可 观测 的 Map 对 象 。Map 对 象 的 每 一 个 对 象 都 是 可 观测 的 , 而 且 向 Map 对 象 中 
添加 或 删除 新 元 素 的 行为 也 是 可 观测 的 ， 这 也 是 Map 类 型 的 可 观测 state 最 大 的 特点 ， 例 如 : 


import { observable, autorun } from "mobx"; 
// Map 可 以 接收 一 个 数组 作为 参数 ， 数 组 的 每 一 个 元 素 代表 Map 对 象 中 的 一 个 键 值 对 


Var map = new Map([["name", "Jack"], ["age", 20]]); 


Var person = observable (map); 


autorun(() => 
console.log( ‘name:${person.get ("name")}, age:${person.get ("age"), 
address:${person.get ("address")}.) 
Wn 


person.set ("address", "shanghai"); 


// 输出 : name:Jack, age:20, address:Shanghai 

person 是 一 个 可 观测 的 Map 对 象 , 当 通 过 Map 的 API 向 person 中 添加 新 元 素 address 时 ,autorun 
会 重新 执行 。 

3. 数组 

返回 一 个 新 的 可 观测 数组 。 数 组 元 素 的 增加 或 减少 都 会 自动 被 观测 ， 例 如 : 


import { observable, autorun } from "mobx"; 
Var todos = observable(["Learn React", "Learn Redux"]); 
autorun(() => console.1log( ` 待 办 事项 数量 : S$ftodos .length} )); 


todos .push ("Learn Mobx"); 
// 输出 : 待 办 事项 数量 : 3 


todos.shift(); 
// 输出 : 待 办 事项 数量 :2 


observable 作用 于 数组 类 型 时 ， 也 会 递归 地 作用 于 数组 中 的 每 个 元 素 对 象 ， 处 理 规则 和 处 理 普 
通 对 象 时 的 规则 相同 ， 例 如 : 


import { observable, autorun } from "mobx"; 





Var todos = observable([ 
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{ text: "Learn React", finished: false }, 


{ text: "Learn Redux", finished: false } 


autorun(() => console.log(‘todo 1 : ${todos[0] .text}, finished: 
${todos[0] .finished} )); 


todos[0] .finished = true; 
// 输出 : todo 1 : Learn React, finished: true 


todos 数组 中 的 元 素 也 转换 成 可 观测 对 象 ， 因 此 ， 元 素 属性 的 变化 会 导致 autorun 的 重新 执行 。 
4. 非 普通 对 象 


这 里 ， 非 普通 对 象 的 概念 是 针对 普通 对 象 而 言 的 ， 特 指 以 自 定义 函数 作为 构造 函数 创建 的 对 
象 。observable 会 返回 一 个 特殊 的 boxed values 类 型 的 可 观测 对 象 。 注 意 ， 返 回 的 boxed values 对 
象 并 不 会 把 非 普 通 对 象 的 属性 转换 成 可 观测 的 , 而 是 保存 一 个 指向 原 对 象 的 引用 , 这 个 引用 是 可 观 
测 的 。 对 原 对 象 的 访问 和 修改 需要 通过 新 对 象 的 get0 和 set0 方 法 操作 ， 例 如 : 


import { observable, autorun } from "mobx"; 


function Person (name，age) { 
this.name = name; 
this.age = age; 

} 


Var person = observable (new Person("Jack", 20)); 


// person 是 boxed values 类 型 ， 必 须 通 过 get () 才能 获取 到 原 对 象 
autorun (() => console.log( name:${person.get() .name}, 


age:S$fperson.get() .age} )) 7 


Person.get() .age = 25 


// 没有 输出 ， 因 为 person 对 象 的 属性 不 可 观测 


// person 封装 的 对 象 设置 为 一 个 新 对 象 ， 引 用 发 生变 化 ， 可 观测 


person.set (new Person("Jack", 20)); 


// 输出 : name:Jack, age:20 
将 非 普通 对 象 的 属性 转换 成 可 观测 的 是 自 定义 构造 函数 的 责任 。 正 确 的 实现 方式 是 : 


import { extendObservable, autorun } from "mobx"; 


function Person (name，age) { 
// 使 用 extendobservable 在 构造 函数 内 创建 可 观测 属性 
extendObservable(this, { 


name: name, 
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Var Person = new Person("Jack", 20); 

autorun(() => console.log( ‘name:${person.name}, age:${person.age} )); 
person.age = 25; 

// 输出 : name:Jack, age:25 


改写 成 使 用 装饰 器 @observable 的 方式 : 


import { observable, autorun } from "mobx"; 


class Person { 
@observable name; 


Qobservable age; 


constructor (name, age) { 
this.name = name; 


this.age = age 


Var person = new Person("Jack", 20); 
autorun(() => console.log( “name:${person.name}, age:${person.age} )) 7 


person.age = 25; 
// 输出 : name:Jack, age:25 


5. 基本 数据 类 型 


MobX 是 将 包含 值 的 属性 (引用 〉 转换 成 可 观测 的 ， 而 不 是 直接 把 值 转换 成 可 观测 的 。 当 
observable 接收 的 参数 是 JavaScript 的 基本 数据 类 型 时 ，MobX 不 会 把 它们 转换 成 可 观测 的 ， 而 是 
同 处 理 非 普通 对 象 一 样 ， 返 回 一 个 boxed values 类 型 的 对 象 ， 例 如 : 


import { observable, autorun } from "mobx"; 


// Jack 这 个 值 是 不 可 观测 的 ， 可 观测 的 是 指向 这 个 对 象 的 引用 


const name = observable ("Jack"); 
autorun(() => console.log( ‘name:${name.get ()} )); 


name.set ("Tom"); 
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// 输出 : name:Tom 


除了 直接 使 用 observable 创建 可 观测 对 象 外 ， 还 可 以 使 用 语义 更 加 精确 的 API 创建 不 同类 型 
的 可 观测 对 象 ， 例 如 : 

observable.object (value) // 创 建 一 个 可 观测 的 object 

observable.array (value)  // 创 建 一 个 可 观测 的 Array 

observable.map (value) // 创 建 一 个 可 观测 的 Map 

observable.box (value) // 创 建 一 个 可 观测 的 Boxed value 


observable(value) 相 当 于 以 上 API 的 简写 方式 ， 会 自动 根据 参数 类 型 的 不 同 使 用 不 同 的 转换 
逻辑 。 
10.2.2 computed value 


computed value 是 根据 state 衍生 出 的 新 值 , 新 值 必须 是 通过 纯 函数 计算 得 到 的 ,computed value 
依赖 的 state 改变 时 ， 会 自动 重新 计算 ， 前 提 是 这 个 computed value 有 被 reaction 使 用 。 也 就 是 说 ， 
computed value 采用 延迟 更 新 策略 ， 只 有 被 使 用 时 才 会 自动 更 新 。 一般 通过 computed 和 @computed 
创建 computed value， 使 用 方式 如 下 : 


computed(() => expression) 


@computed get classProperty() { return expression; } 


computed 一 般 用 于 接收 一 个 函数 ， 例 如 : 


import { observable, computed, autorun } from "mobx"; 


Var person = observable.object({ 
name: "Jack", 
age: 20， 

DD); 


// 使 用 computed 函数 创建 computed value 

const isYoung = computed(()=> { 
return person.age < 25; 

}) 


autorun(() => 
console.log( ‘name:${person.name}, isYoung:${isYoung} ) 


person.age = 25; 


// 输出 : name:Jack, isYoung:false 


@computed 一 般 用 于 修饰 class 的 属性 的 getter 方法 ， 例 如 : 
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import { observable, computed, autorun } from "mobx"; 


class Person { 
Qobservable name; 


Qobservable age; 


// 使 用 ecomputed 装饰 器 创建 computed value 
Q@computed get isYoung() { 
return this.age < 25; 


} 


constructor (name, age) { 
this.name = name; 
this.age = age 


} 


Var person = new Person("Jack", 20); 


autorun(() => console.log( name:${person.name}, 


isYoung:${person.isYoung} )); 


person.age = 25; 


// 输出 : name:Jack, isYoung:false 


10.2.3 reaction 


reaction 是 自动 响应 state 变化 的 有 副作用 的 函数 。 和 computed value 相同 的 地 方 是 ， 它 们 都 会 
因为 state 的 变化 而 自动 触发 ， 所 以 computed value 和 reaction 在 MobX 中 都 被 称 为 derivation 〈 衍 
生 ) 。derivation 是 指 可 以 从 state 中 衍生 出 来 的 任何 东西 ， 例 如 值 或 者 动作 。 与 computed value 不 
同 的 是 ，reaction 产生 的 不 是 一 个 值 ， 而 是 执行 一 些 有 副作用 的 动作 ， 例 如 打印 信息 到 控制 台 、 发 
送 网 络 请 求 、 根 据 React 组 件 树 更 新 DOM 等 。 

使 用 observer/@observer 封装 React 组 件 是 常用 的 创建 reaction 的 方式 。observer/@observer 是 
mobx-react 这 个 包 提供 的 API， 常 用 的 使 用 方式 有 如 下 三 种 : 


observer( (props, context) => ReactElement) 
observer (class MyComponent extends React.Component { ... }) 


Qobserver class MyComponent extends React.Component { ... } 


observer 的 参数 可 以 是 一 个 React 函数 组 件 ， 也 可 以 是 一 个 React 类 组 件 ， 但 对 于 类 组 件 一 般 
习惯 使 用 @observer 创建 reaction。observer/@observer 本 质 上 是 将 组 件 的 render 方 法 转换 成 reaction， 
当 render 依赖 的 state 发 送 变 化 时 ，render 方法 会 被 重新 调用 。 

除了 observer/@observer 外 ， 常 用 的 创建 reaction 的 API 还 有 autorun、reaction、when， 这 几 
个 API 直接 作用 于 函数 而 不 是 组 件 。 
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1. autorun 
用 法 : 
autorun(() => { sideEffect }) 


autorun 在 前 面 的 例子 中 已 经 多 次 使 用 到 。 使 用 autorun 时 , 它 接收 的 函数 会 被 立即 触发 执行 一 
次 ， 以 后 的 执行 就 依赖 于 函数 使 用 的 state 的 变化 了 。autorun 会 返回 一 个 清除 函数 disposer， 当 不 
再 需要 观察 相关 state 的 变化 时 ， 可 以 调用 disposer 函数 清除 副作用 ， 例 如 : 


var numbers = observable([1,2,3]); 


Var sum = computed(() => numbers.reduce((a, b) => aa + b, 0)); 


Var disposer = autorun(() => console.log(sum.get ())); 
// 输出 : 6 

numbers.push (4); 

// 输出 : 10 


disposer(); // 清除 autorun 


numbers.push (5); 


// 没有 输出 

2. reaction 

用 法 : 

reaction(() => data, data => { sideEffect }, options?) 


它 接收 两 个 函数 ， 第 一 个 函数 返回 被 观测 的 state， 这 个 返回 值 同时 是 第 二 个 函数 的 输入 值 ， 
只 有 第 一 个 函数 的 返回 值 发 生变 化 时 ， 第 二 个 函数 才 会 被 执行 。 第 三 个 参数 options 是 可 选 参数 ， 
提供 一 些 可 选 设置 , 一 般 很 少 用 到 。 reaction 也 会 返回 一 个 清除 函数 disposer。 可 见 , 相 较 于 autorun， 
reaction 可 以 对 跟踪 哪些 对 象 有 更 多 的 控制 。 下 面 是 一 个 示例 : 


const todos = observable([ 
{ 
title: "Learn React", 
done: true 
} 
{ 
title: "Learn Mobx", 
done: false 
} 
1); 


// 错误 用 法 : 只 响应 todos 数组 长 度 的 变化 ， 不 会 响应 title 属性 的 变化 
const reactionl = reaction( 


() => todos.length, 
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length => console.log("reaction 1:", todos.map (todo => todo.title) .join(", ")) 


a 


// 正确 用 法 : 同时 响应 todos 数组 长 度 和 title 属性 的 变化 
const reaction2 = reaction( 
() => todos.map (todo => todo.title), 
titles => console.log("reaction 2:", titles.join(", ")) 


); 


todos.push({ title: "Learn Redux", done: false }); 
// 输出 : 
// reaction 2: Learn React, Learn MobXx, Learn Redux 


// reaction 1: Learn React, Learn MobXx, Learn Redux 


todos[0] .title = "Learn Something"; 

// 输出 : 

// reaction 2: Learn Something, Learn Mobx, Learn Redux 
3. when 

用 法 : 


when(() => condition, () => { sideEffect }) 


condition 会 自动 响应 它 使 用 的 任何 state 的 变化 ， 当 condition 返回 true 时 ， 函 数 sideEffect 会 
执行 ， 且 只 执行 一 次 。when 也 会 返回 一 个 清除 函数 disposer。when 非常 适合 用 在 以 响应 式 的 方式 
执行 取消 或 清除 逻辑 的 场景 ， 例 如 : 


class MyResource { 
constructor() { 
when ( 
() => !this.isVisible, 
() => this.dispose() 
) 7 


@computed get isVisible() { 


// 判断 某 个 元 素 是 否 可 见 


dispose() { 
// 清除 逻辑 
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10.2.4 action 


action 是 用 来 修改 state 的 函数 。MobX 提供 了 API action 和 (@action 用 来 包装 action 函数 ， 但 
这 并 不 是 必需 的 。 当 MobX 运行 在 严格 模式 下 (调用 mobx-useStrict(true) 即 可 启动 严格 模式 ) 时 ， 
必须 使 用 这 两 个 API 包装 action 函数 。 常 见 的 用 法 有 : 


action (fn) 


Q@action classMethod 


为 了 让 代码 更 加 清晰 可 读 ， 建 议 创 建 action 函数 时 都 要 使 用 action/@action 。 此 外 ， 
action/@action 还 能 带 来 性 能 的 提升 , 当 函 数 内 多 次 修改 state 时 ,action/@action 会 执行 批 处 理 操 作 ， 
只 有 所 有 的 修改 都 执行 完成 后 ， 才 会 通知 相关 的 computed value 和 reaction。 下 面 是 一 个 获取 BBS 
帖子 列表 的 action: 


Q@action fetchPostList(url) { 
this.pendingRequestCount++; 
return fetch (ur1) .then( 

action(data => { 
this.pendingRequestCount-——; 
this.posts.push (data); 
}) 
x 
l 


这 里 需要 注意 ， 我 们 使 用 了 两 次 action 函数 ， 因 为 fetch 是 异步 执行 的 ， 执 行 完成 的 回调 函数 


中 也 会 修改 state， 所 以 需要 单独 使 用 一 个 action 包装 回调 函数 。 
使 用 action 时 ， 需 要 注意 函数 内 this 指向 的 问题 ， 例 如 : 


class Ticker { 
@observable tick = 0 


@action 
increment() { 

this .七 ICK+ 十 7 
} 


const ticker = new Ticker() 

setInterval (ticker.increment，1000) // 报错 

在 上 面 的 例子 中 ，increment 执行 时 ，this 指向 的 是 全 局 的 window 对 象 ， 并 不 是 期 望 的 Ticker 
的 实例 对 象 。 可 以 使 用 箭头 函数 解决 this 绑 定 的 问题 : 


class Ticker { 


Qobservable tick = 07 
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Q@action 

increment = () => { 
this tickt+y 

. 


const ticker = new Ticker(); 


setInterval (ticker.increment, 1000); 
此 外 ，MobX 还 提供 了 (@action.bound 和 action.bound 两 个 API 帮助 完成 this 绑 定 的 工作 : 


class Ticker { 
@observable tick = 0 


@action.bound 
increment () { 
this.tickt+; 


} 


Const ticker = new Ticker(); 


setInterval (ticker.increment, 1000); 
或 


const ticker = observable({ 
tick: 1y 
increment: action.bound(function() { 
this.tickt+; 
} 
}) 


setInterval (ticker.increment, 1000); 


10.3 ”MobX 响应 的 常见 误区 


一 般 情 况 下 ，MobX 会 按照 我 们 的 预期 进行 工作 ， 但 在 一 些 场景 下 ， 如 果 不 真正 理解 MobX 
到 底 是 对 什么 进行 响应 ， 就 会 写 出 错误 的 代码 。 这 里 总 结 了 3 个 常见 的 误区 : 

(1) MobX 是 通过 追踪 属性 的 访问 来 追踪 值 的 变化 ， 而 不 是 直接 追踪 值 本 身 的 变化 。 所 以 ， 
必须 在 MobX 的 derivation (computed value 和 reaction) 中 解 引 用 〈dereference) 可 观测 对 象 的 属 
性 ， 才 能 正确 观测 到 这 些 属 性 值 的 变化 。 例 如 : 


Var todo = observable({ 
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title: "Learn React™ 


}) 


autorun(() => { 
console.log(todo.title) 
}) 


todo = observable({ title: "Bar™" }) 


解 引用 (dereference ) 指 根据 引用 获取 引用 指向 的 值 的 过 程 。 它 和 引用 (reference ) 过 
注意 程 是 两 个 相反 的 过 程 。 引 用 过 程 可 以 记 作 : reference of B > A, 解 引 用 过 程 可 以 记 作 : 


dereference of A => B。 


autorun 不 会 有 响应 。todo 虽然 被 改变 了 ,但 它 只 是 一 个 指向 一 个 可 观测 对 象 的 变量 (引用 ) ， 
它 本 身 并 不 是 可 观测 的 。 正 确 的 写法 是 : 


Var todo = observable({ 
title: "Learn React" 


}) 


autorun(() => { 
console.log(todo.title) 
}) 


todo.title = "Bar" 


在 autorun 这 个 reaction 中 解 引用 title 属性 的 值 (通过 todo.title 的 访问 方式 解 引用 ), 所 以 title 
的 变化 可 以 被 正确 追踪 。 
再 考虑 下 面 的 例子 : 


Var todo = observable({ 
title: "Learn React" 

}) 

var title = todo.title; 


autorun(() => { 
console.log (title) 
3 


title = "Bar™" 


autorun 不 会 有 响应 。todo.title 在 autorun 外 部 被 解 引 用 ，autorun 内 部 使 用 的 title 变量 只 是 一 
个 字符 串 类 型 的 值 ， 是 不 可 观测 的 。MobX 必须 通过 追踪 todo.title 来 追踪 title 属性 值 的 变化 。 
最 后 一 个 例子 : 
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Var todo = observable({ 
task: { 
title: "Learn React", 
content: "Read more books about React" 
} 
}) 


var task = todo.task; 


autorun(() => { 
console.log(task.title) 
}) 


todo.task.title = "Bar"; // 修改 1 
todo.task = { // 修改 2 
title: "Learn MobX"， 
content: "Read more books about Mobx" 
}s 
这 个 例子 更 具有 迷惑 性 。 修 改 1 会 触发 autorun 响应 ， 修 改 2 不 会 触发 autorun 响应 。 原 因 是 
todo.task 和 task 变量 是 指向 同一 个 可 观测 对 象 的 引用 ,在 autorun 内 部 解 引用 task.title, 修改 1 对 tite 
属性 的 修改 当然 可 以 被 autorun 追踪 到 ; 修改 2 改变 的 是 todo 的 task 属性 ， 在 autorun 内 部 并 没有 
解 引用 task 属性 ， 所 以 task 属性 值 的 变化 无 法 被 autorun 追踪 到 。 


(2) MobX 只 追踪 同步 执行 过 程 中 的 数据 。 
例如 : 


Var todo = observable({ 
title: "Learn React" 
DD); 


autorun(() => { 
setTimeout (() => console.log(todo.title), 100); 
1); 


todo.title = "Bar"; 


autorun 不 会 有 响应 。autorun 执行 期 间 并 没有 访问 任何 可 观测 对 象 ，todo 是 在 setTimeout 异步 
执行 期 间 访问 的 。 


(3) observer 创建 的 组 件 ， 只 有 当前 组 件 render 方法 中 直接 使 用 的 数据 才 会 被 追踪 ， 例 如 : 


const MyComponent = observer(({ todo }) => 
<SomeContainer 
title = {() => <div>{todo.title}</div>} 
/> 
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) 


// 注意 ， 这 只 是 个 示例 ， 修 改 todo .title 的 正确 方式 是 在 Mycomponent 的 父 组 件 中 完成 
todo.title = "Bar" // 组 件 不 会 重新 泻 染 


这 个 例子 中 ，SomeContainer 组 件 的 title 是 一 个 回调 函数 ， 用 于 演 染 title。 虽 然 看 似 todo.title 





是 在 MyComponent 的 render 方法 中 使 用 的 ， 但 并 不 是 直接 使 用 的 ， 因 为 回调 函数 title 的 执行 是 在 
SomeContainer 内 ， 回 调 函 数 title 执行 时 ，todo.title 才 是 直接 使 用 的 。 要 想 让 SomeContainer 可 以 
正确 响应 todo.title 的 变化 ，SomeContainer 本 身 也 需要 使 用 observer 包装 。 


如 果 SomeContainer 来 自 外 部 库 ， 就 不 方便 直接 使 用 observer 包装 SomeContainer。 这 时 候 ， 


SomeContainer 的 title 回调 函数 中 可 以 使 用 一 个 可 观测 的 组 件 ， 响 应 todo.title 的 变化 : 


const MyComponent = observer(({ todo }) => 


<SomeContainer 
title = {() => <TitleRenderer todo={todo} />} 
Fe 


3} 


// TitleRenderer 是 一 个 可 观测 组 件 ，someContainer 通过 使 用 TitleRenderer， 

// 响应 title 的 变化 

const TitleRenderer = observer(({ todo }) => 
<div>{todo.title}</div>) 

) 


todo.title = "Bar" // 组 件 会 重新 泻 染 
还 有 另 一 种 方案 是 使 用 mobx-react 包 提 供 的 Observer 组 件 , 它 不 接收 参数 , 只 需要 单个 render 


函数 作为 子 节点 : 


import { Observer } from "mobx-react"; 


const MyComponent = ({ todo }) => 
<SomeContainer 
title = {() => 
<Observer> 
{() => <div>{todo.title}</div>} 
</Observer> 
} 
A 


todo.title = "Bar" // 组 件 会 重新 泻 染 
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10.4 在 React 中 使 用 MobX 


MobX 提供 了 一 个 mobx-react 包 帮 助 开发 者 方便 地 在 React 中 使 用 MobX。 我 们 在 前 面 已 经 多 
次 使 用 的 observer@observer 就 来 自 这 个 包 。 下 面 介绍 mobx-react 中 另外 两 个 常用 API。 

® Provider 
Provider 是 一 个 React 组 件 ， 利 用 React 的 context 机 制 把 应 用 所 需 的 state 传递 给 子 组 件 。 
它 的 作用 与 react-redux 提供 的 Provider 组 件 是 相同 的 。 

® inject 
inject 是 一 个 高 阶 组 件 ， 它 和 Provider 结合 使 用 ， 用 于 从 Provider 提供 的 state 中 选取 所 需 
数据 ， 作 为 props 传递 给 目标 组 件 。 常 用 方式 有 如 下 两 种 : 


inject ("storel", "store2") (observer (MyComponent)) 


@inject ("storel", "store2") Q@observer MyComponent 
一 个 简单 示例 : 


import React, { Component } from "react"; 

import ReactDOM from "react-dom"; 

import { observer, inject, Provider } from "mobx-react"; 
import { observable } from "mobx"; 


@observer 
einject ("store") // inject 从 context 中 取出 store 对 象 ， 注 入 到 组 件 的 props 中 
class App extends Component { 
render() { 
const { store } = this.props; 
return ( 
<div> 
<ul> 
{store.map(todo => <TodoView todo={todo} key={todo.id} />)} 
</ul> 
</div> 
); 


const TodoView = observer(({ todo }) => { 
return <li>{todo.title}</1i>; 
1D); 
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// 构造 store 及 其 初始 数据 

const todos = observable([]); 
todos.push({ id: 1, title: "Taskl" }); 
todos .push({ id: 27 title: "Task2" })s 


ReactDOM.render ( 
{/* Provider 向 context 中 注入 store 对 象 */} 
<Provider store={todos}> 
<App /> 
</Provider>, 
document .getElementById ("root") 
); 


10.5 本章 小 结 


本 章 介绍 了 MobX 的 思想 、 主 要 组 成 和 基本 用 法 。MobX 同样 遵循 单项 数据 流 ， 通 过 action 
改变 state, state 的 变化 又 会 触发 computed value 和 reaction 的 重新 执行 。 可 观测 对 象 是 使 用 MobX 
的 核心 , 读者 要 理解 如 何 创建 可 观测 对 象 、 不 同类 型 的 可 观测 对 象 的 表现 行为 有 何 差 异 以 及 使 用 可 
观测 对 象 的 几 个 常见 误区 。MobX 提供 了 mobx-react 包 ， 用 于 方便 地 在 React 应 用 中 使 用 MobX。 

下 一 章 ， 我 们 将 在 实战 项 目 中 使 用 MobX。 





MobX 项 目 实战 


本 章 将 使 用 MobX 作为 状态 管理 方案 重 构 BBS 项 目 。 本 章 项 目 源 代码 的 目录 为 /chapter-11/ 


bbs-mobx。 


11.1 组 织 项 目 结构 


使 用 MobX 时 ， 没 有 必要 像 使 用 Redux 那样 区 分 容器 组 件 和 展示 组 件 。 所 有 组 件 会 自动 根据 
state 的 变化 进行 泻 染 〈 当 然 ， 前 提 是 组 件 使 用 observer/@observer 包装 ) ， 所 有 组 件 都 相当 于 展示 
组 件 。 

这 里 读者 可 能 会 有 疑问 : MobX 项 目 中 ， 所 有 组 件 都 需要 使 用 observer/@observer 包装 吗 ? 这 
倒 也 不 是 ， 如 果 组 件 中 使 用 到 可 观测 的 state， 组 件 就 必须 使 用 observer/@observer 包装 ; 否则 可 以 
不 使 用 observer/@observer。 但 即使 组 件 中 没有 使 用 可 观测 的 state, 使 用 observer/@observer 包装 组 
件 也 是 有 好 处 的 , 因为 observer/@observer 会 将 组 件 使 用 的 不 可 观测 的 props 转换 成 可 观测 的 props， 
这 样 只 有 当 props 真正 发 生 改变 时 ， 当 前 组 件 才 会 重新 泻 染 。 简 单 理解 的 话 ，observer@observer 
的 使 用 相当 于 重 写 了 组 件 的 shouldComponentUpdate 方法 。 所 以 可 以 在 项 目 中 尽 可 能 多 地 使 用 
observer@observer， 这 可 以 提高 所 有 组 件 的 泻 染 效率 。 当 然 ， 这 种 方式 也 有 一 个 缺点 : 难以 在 不 
使 用 MobX 的 项 目 中 复 用 这 些 组 件 。 

我 们 前 面 已 经 提 到 ，MobX 中 的 state 一 般 会 封装 在 不 同 的 store 中 ，store 不 仅 保存 了 state， 
还 保存 了 操作 state 的 方法 。 对 于 与 领域 直接 相关 的 state， 一 般 会 创建 专门 的 model 实体 类 ， 用 于 
描述 state。 

根据 上 面 的 分 析 ，BBS 的 项 目 结构 如 图 11-1 所 示 。 
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4 src 


4 api 
authApijs 
commentApijs 


postApijs 
4 components 
» App 
» Header 





图 11-1 


这 里 , 我 们 还 将 store 中 使 用 到 的 网 络 请 求 单独 封装 , 放 到 api 文件 夹 下 , 这 样 有 助 于 测试 store 
时 模拟 网 络 请 求 。 





11.2 设计 store 


Store 的 职责 是 将 组 件 使 用 的 业务 逻辑 和 状态 封装 到 单独 的 模块 中 , 这 样 组 件 就 可 以 专注 于 UI 
泻 染 。 第 10 章 介 绍 state 时 已 经 提 到 ，state 可 以 分 为 三 类 : 与 领域 直接 相关 的 领域 状态 数据 、 反 映 
应 用 行为 (登录 状态 、 当 前 是 否 有 API 请 求 等 ) 的 应 用 状态 数据 和 代表 UI 状态 的 UI 状态 数据 。 
后 两 种 state 一 般 不 会 涉及 太 多 逻辑 ， 仅 仅 是 关于 应 用 、UI 的 一 些 松散 状态 的 读 取 和 简单 修改 ， 封 
装 这 两 种 state 的 store 实现 也 很 直观 。 领 域 state 的 数据 结构 较 复杂 ， 且 往往 涉及 较 多 的 逻辑 处 理 。 
领域 state 可 以 使 用 普通 对 象 来 描述 ， 也 可 以 使 用 class 来 描述 ， 例 如 描述 一 个 待 办 任务 todo: 

// 使 用 普通 对 象 


Var todo = {id: 1，title: "Todol", finished: false} 


// 使 用 class 
class Todo { 
id; 
title; 
finished; 


} 
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使 用 class 比 使 用 普通 对 象 描述 state 有 一 些 优势 


(1) class 内 可 以 定义 方法 ， 可 以 自己 保存 上 下 文 信息 而 不 依赖 外 部 ， 因 此 class 描述 的 state 
比 普通 对 象 描述 的 state 更 容易 被 单独 使 用 。 

(2) class 内 可 以 方便 地 混合 使 用 可 观测 属性 和 非 可 观测 属性 ， 例 如 ， 在 Todo class 中 ， 我 们 
希望 只 有 title 和 finished 是 可 观测 的 ， 那 么 只 需要 在 这 两 个 属性 前 使 用 @observable，id 继续 作为 
不 可 观测 属性 使 用 。 

(3) class 描述 的 state 辨识 度 高 且 容易 进行 类 型 校 验 。 


所 以 ， 稍 复杂 的 领域 state 都 建议 大 家 使 用 class 来 描述 。 
一 个 领域 store 对 应 应 用 中 的 一 个 简单 的 领域 概念 ， 这 个 领域 的 state 和 state 的 管理 都 由 这 个 
store 负责 。 具 体 来 讲 ， 领 域 store 的 职责 有 : 


(1) 实例 化 领域 state， 并 且 保 证 领域 state 知道 它 属于 哪 一 个 store。 
(2) 每 一 个 领域 store 在 应 用 中 只 能 有 一 个 实例 对 象 , 例如 , 应 用 中 不 能 有 两 个 todoList store。 
(3) 更 新 领域 state， 无 论 是 通过 服务 器 端 获取 ， 还 是 来 自 纯 客户 端的 修改 。 
根据 上 面 的 介绍 , 我 们 可 以 为 BBS 创建 5 个 store: AppStore、AuthStore、UIStore、PostsStore、 
CommentsStore。AppStore 和 AuthStore 是 应 用 状态 store，UIStore 是 UI store，PostsStore 和 
CommentsStore 是 领域 store。 另 外 ， 还 可 以 创建 PostModel 和 CommentModel 两 个 class， 代 表 领 域 
state。 下 面 就 来 逐一 分 析 每 个 store。 


1. AppStore 
AppStore 管理 的 state 包括 应 用 当前 的 请 求 数量 requestQuantity 和 应 用 的 错误 信息 error: 


class AppStore { 
Qobservable requestQuantity = 0; 


@observable error = null; 


i 
} 
requestQuantity 间接 决定 界面 上 是 否 需 要 显示 Loading 效果 ,因此 可 以 创建 一 个 computed value 
直接 标识 是 否 需 要 显示 Loading 效果 : 
class APPStore { 
@computed get isLoading() { 


return this.requestQuantity > 0; 


} 
Wes 
} 
最 后 ， 为 AppStore 添加 修改 state 的 action， 完 整 代码 如 下 : 


import { observable, computed, action } from "mobx"; 
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class AppStore { 
QQobservable requestQuantity = 0; 


Qobservable error = null; 


@computed get isLoading() { 
return this.requestQuantity > 0; 


} 


// 当前 进行 的 请 求 数量 加 1 
Qaction increaseRequest() { 
this.requestQuantity ++; 

} 


// 当前 进行 的 请 求 数量 减 1 
Q@action decreaseRequest() { 
if(this.requestQuantity > 0) 
this.requestQuantity -—-; 


} 


// 设置 错误 信息 
@action setErrorl(error) { 
this.error = error; 


} 


// 删除 错误 信息 ， 因 为 会 作为 回调 函数 被 单独 调用 ， 所 以 这 里 需要 绑 定 this 
@action.bound removeError() { 
this.error = null; 


} 


export default APPStore7 


这 里 ，removeError 使 用 @action.bound 绑 定 this， 因 为 存在 removeError 不 是 通过 AppStore 实 
例 调用 的 场景 ， 而 是 直接 作为 组 件 的 回调 函数 被 使 用 。 为 了 保证 removeError 中 的 this 一 直 指向 的 
是 AppStore 的 实例 对 象 ， 所 以 使 用 了 @action.bound。 


2. AuthStore 
AuthStore 负责 用 户 的 登录 认证 ， 使 用 到 的 state 包括 userId、username 和 password， 除 了 包含 
直接 修改 这 几 个 state 的 action 外 ， 还 定义 了 登录 和 注销 两 个 action， 这 两 个 action 涉及 网 络 请 求 ， 


所 以 又 会 改变 AppStore 的 state, 我 们 通过 构造 函数 把 AppStore 的 实例 和 登录 API 传递 给 AuthStore， 
代码 如 下 : 
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import { observable, action } from "mobx"; 


class RARuthStore { 
api; 
appstore; 
QQobservable userId = sessionStorage .getItem("userId") 7 
QQobservable username = sessionStorage .getItem("username") 7 
Qobservable password = ""; 
// 通过 构造 函数 传递 Appstore 的 实例 对 象 和 登录 相关 的 API 
constructor (api, appstore) { 
this.api = api; 


this.appStore = appStore7 


Qaction setUsername (username) { 


this.username = username; 


Qaction setPassword(password) { 


this.password = password; 


Qaction login() { 
this.appStore.increaseRequest (); 
const params = { username: this.username, password: this.password }; 
// 异步 回调 函数 需要 单独 定义 成 一 个 action 
return this.api.loginl(params) .then(action(data => { 
this.appStore.decreaseRequest (); 
if (!data.error) { 
this.userId = data.userId; 
sessionStorage .setItem("userId"，this.userId) 7 
sessionStorage .SetItem("username"，this.usernarme) 7 
return Promise.resolve(); 
} else { 
this.appSstore.setError (data.error); 
return Promise.reject(); 
. 
Fh 


@action.bound logout() { 
this.userId = null; 


this.username = null; 
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this.password = null; 
sessionStorage .removVveItem("userId") 7 


sessionStorage .removeItem("username") 7 


export default Authstore; 


3. UlStore 
UIStore 负责 新 建 帖子 和 编辑 帖子 两 个 UI 状态 的 控制 ， 代 码 很 简单 ， 不 多 做 解释 : 


import { observable, action } from "mobx"; 


class UIStore { 
Qobservable addDialogOpen = false; 
Qobservable editDialogOpen = false; 


// 设置 新 建 帖子 编辑 框 的 状态 
Q@action setaddDialogStatus (status) { 
this.addDialogopen = status 


// 设置 修改 帖子 编辑 框 的 状态 
@action setEditDialogStatus (status) { 
this.editDialogOpen = status 


export default UIStore; 


4. PostsStore 
PostsStore 负责 帖子 对 应 的 领域 ， 我 们 单独 创建 一 个 class PostModel， 用 来 描述 帖子 对 应 的 


state: 


import { observable, action } from "mobx"; 


class PostModel { 
store; // PostModel 实例 对 象 所 属 的 store 
id; 
Qobservable title; 
Qobservable content; 
Qobservable vote; 
Qobservable author; 


@observable createdAt; 
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Qobservable updatedAt; 


constructor (store, id, title, content, vote, author, createdAt, updatedAt) { 
this.store = store; 
this.id = id; 
this.title = title; 
this.content = content; 
this.vote = vote; 
this.author = author; 
this.createdAt = createdAt; 
this.updatedAt = updatedAt; 


// 根据 JSON 对 象 更 新 帖子 

Q@action updateFromJS (json) { 
this.title = json.title; 
this.content = json.content; 
this.vote = json.vote; 
this.author = json.author; 
this.createdAt = json.createdRAt7 
this.updatedAt = json.updatedAat; 


// 静态 方法 ， 创 建新 的 PostModel 实例 
static fromJS (store, object) { 
return new PostModel( 
store, 
object.id, 
object.title, 
object.content, 
object.vote, 
object .authory 
object .createdRaty 
object .updatedRAt 


export default PostModel; 


PostModel 包含 帖子 标题 、 内 容 、 作 者 等 可 观测 属性 ，action updateFromJS 用 于 根据 服务 器 端 
返回 的 数据 更 新 PostModel 实例 ， 静 态 方法 fromJS 用 于 根据 服务 器 端 返回 的 数据 构造 PostModel 


El 
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的 实例 ， 这 两 个 方法 在 PostsStore 中 都 要 用 到 。 
PostsStore 中 保存 一 个 可 观测 的 数组 posts，posts 的 元 素 是 PostModel 的 实例 ，PostsStore 的 
action 包括 获取 帖子 列表 、 获 取 帖 子 详情 、 新 建 帖子 和 修改 帖子 ， 代 码 如 下 : 


import { observable, action, toJS } from "mobx"; 


import PostModel from "../models/PostModel"; 


class PostsStore { 
api; 
appstore; 
authstore; 
Qobservable posts = []; // 数组 的 元 素 是 PostModel 的 实例 


constructor (api, appStore, authstore) { 
this.api = api; 
this.appStore = appstore; 
this.authStore = authstore; 


// 根据 帖子 id 获取 当前 store 中 的 帖子 
getPost (id) { 
return this.posts.find(item => item.id 





// 从 服务 器 获取 帖子 列表 
Qaction fetchPostList() { 
this .appStore.increaseRedquest () 
return this.api.getPostList() .then( 
action(data => { 
this.appStore.decreaseRequest (); 
if (!data.error) { 
this.posts.clear (); 
data.forEach (post => this.posts.push (PostMode1.fromJS (this, post))); 
return Promise.resolve(); 
} else { 
this.appSstore.setError (data.error); 


return Promise.reject(); 


}) 


// 从 服务 器 获取 帖子 详情 
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@action fetchPostDetail(id) { 
this.appStore.increaseRequest (); 
return this.api.getPostById(id) .then( 
action(data => { 
this.appStore.decreaseRequest (); 
if (!ldata.error && data.length === 1) { 
const post = this.getPost (id); 
// 如 果 store 中 当前 post 已 存在 ， 就 更 新 post 
// 否则 ， 添 加 post 到 store 
if (post) { 
post.updateFromJS (data[0]); 
} else { 
this.posts.push(PostModel .fromJs (this, data[0])); 
} 
return Promise.resolve(); 
} else { 
this.appStore.setError (data.error); 


return Promise.reject(); 


}) 


// 新 建 帖 子 
@action createPost(post) { 
const content = { ...post, author: this.authSstore.userId, vote: 0 }; 
this.appStore.increaseRequest (); 
return this.api.createPost (content) .then( 
action(data => { 
this.appStore.decreaseRequest (); 
if (!data.error) { 
this.posts.unshift (PostModel .fromJSs (this, data)); 
return Promise.resolve(); 
} else { 
this.appStore.setError (data.error); 


return Promise.reject(); 


}) 


// 更 新 帖子 


Qaction updatePost(id, post) { 
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this.appStore.increaseRequest () 7 
return this.api.updatePost (id，Ppost) .then( 
action(data => { 
this.appStore.decreaseRequest (); 
IE (!data.error) { 
const oldPost = this.getPost (id); 
if (oldPost) { 
/* 更 新 帖子 的 API， 返 回 数 据 中 的 author 只 包含 authorId 
* 因此 需要 从 原来 的 post 对 象 中 获取 完整 的 author 数据 。 
* toJS 是 Mobx 提供 的 函数 ， 用 于 把 可 观测 对 象 转换 成 普通 的 Js 对 象 。 */ 
data.author = toJS (oldPost.author); 
oldPost .updateFromJSs (data); 
} 
return Promise.resolve(); 
} else { 
this.appStore.setError (data.error); 


return Promise.reject(); 


export default PostsStore; 


5. CommentsStore 

CommentsStore 负责 评论 对 应 的 领域 ， 与 PostsStore 相同 ， 先 创建 class CommentModel， 描 述 
评论 对 应 的 state: 

import { observable } from "mobx"; 

class CommentModel { 


store; 
id; 


@observable 
@observable 
@observable 


@observable 


constructor (store, id, content, author， createdAat, 


this.store 


this.id = 


content; 
author; 
createdAt; 
updatedAt; 


= store; 


id; 


this.content = content; 


updatedRAt) 


{ 
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this.author = author; 
this.createdAt = createdAt; 
this.updatedAt 


updatedAt; 


static fromJS (store, object) { 
return new CommentModel( 

store, 
object.id, 
object.content, 
object.author, 
object.createdAt, 
object .updatedRAt 


export default CommentModel; 


CommentsStore 中 保存 一 个 可 观测 的 数组 comments，comments 的 元 素 是 CommentModel 的 实 
例 。CommentsStore 中 定义 的 action 包括 获取 某 个 帖子 的 评论 列表 和 新 建 评 论 ， 代 码 如 下 : 


import { observable, action } from "mobx"; 





import CommentModel from "../models/CommentModel 


class CommentsStore { 
api; 
appSstore; 
authstore; 
Qobservable comments = [];  // 数组 的 元 素 是 CommentModel 的 实例 


constructor (api, appStore, authstore) { 
this.api = api; 
this.appStore = appSstore; 
this.authStore = authstore; 


// 获取 评论 列表 


Qaction fetchCommentList(postId) { 
this.appSstore.increaseRequest (); 
return this.api.getCommentList (postId) .then(action(data => { 
this.appStore.decreaseRequest (); 
if (!data.error) { 
this.comments.clear(); 
data.forEach (item => this.comments.push (CommentModel .fromyJs (this, 


item))); 
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return Promise.resolve(); 
} else { 
this.appStore.setError (data.error); 
return Promise.reject(); 
} 
1D); 
. 


// 新 建 评论 
Qaction createComment (content){ 
this.appStore.increaseRequest (); 
return this.api.createComment (Content) .then (action (data => { 
this.appStore.decreaseRequest (); 
if (!data.error) { 
this.comments.unshift (CommentModel .fromJSs (this, data)); 
return Promise.resolve(); 
} else { 
this.appStore.setError (data.error); 
return Promise.reject(); 
} 
1)); 


export default CommentsStore; 


6. 合并 store 


通常 会 把 使 用 到 的 多 个 store 再 次 合并 成 一 个 根 store, 利用 mobx-react 提 供 的 高 阶 组 件 Provider 
将 根 store 注入 组 件 树 中 。 我 们 在 stores/index.js 中 完成 这 项 工作 : 


import AppStore from "./AppStore"; 

import Authstore from "./Authstore"; 

import PostsStore from "./PostsStore"; 
import CommentsStore from "./CommentsStore"; 
import UIStore from "./UIStore"; 

import authApi from "../api/authApi"; 

import postApi from "../api/postApi"; 


import commentApi from "../api/commentApi"; 


// 每 个 store 在 应 用 中 只 存在 一 个 实例 对 象 

const appStore = new AppStore(); 

Const authStore = new AuthStore (authApi, appSstore); 

const postsStore = new PostsStore(postApi, appSstore, authstore); 

const commentsStore = new CommentsStore (commentApi, appStore, authstore); 


const uistore = new UIStore(); 
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const stores = { 
appstore, 
authstore, 
postsstore, 
commentsStore, 
uistore 


j 


export default stores; 


在 stores/index.js 中 ， 对 每 一 个 store 都 进行 实例 化 ， 然 后 合并 成 一 个 对 象 导出 。 这 样 既 保 证 每 


一 个 store 只 有 一 个 实例 ， 又 便于 外 部 组 件 的 使 用 。 


11.3 ”视图 层 重 构 


视图 层 的 重 构 工 作 主 要 是 使 用 observer/@observer 将 组 件 转换 成 一 个 个 reaction， 同 时 使 用 


mobx-react 提供 的 inject/@inject 注入 组 件 所 需 的 store。 


首先 ， 在 组 件 树 的 最 外 层 使 用 mobx-react 提供 的 Provider 组 件 注入 合并 后 的 store: 


// index.js 

import React from "react"; 

import ReactDOM from "react-dom"; 
import { useStrict } from 'mobx'; 
import { Provider } from "mobx-react"; 
import App from "./components/App"; 


import stores from "./stores"; 


// 在 严格 模式 下 ， 运 行 MobX 


usestrict (true) 


ReactDOM.render( 
<Provider {...stores}> 
<App /> 
</Provider>, 
document .getElementById ("root") 


组 件 App 需要 使 用 appStore， 主 要 代码 如 下 : 


einject ("appstore") // einject 注入 使 用 的 store: appstore 
@observer // Qobserver 把 app 组 件 转化 成 一 个 reaction， 自 动 响 应 


class App extends Component { 


// -..- 


state 的 变化 
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render() { 
const { error, isLoading, removeError } = this.props.appSstore; 
const errorDialog = error && ( 
<ModalDialog onClose={removeError}>{error.message || 
error}</ModalDialog> 
); 


return ( 
<div> 
<Router> 
<Switch> 
<Route exact path="/" component={AsyncHome} /> 
<Route path="/login" component={AsyncLogin} /> 
<Route path="/posts" component={AsyncHome} /> 
</Switch> 
</Router> 
{errorDialog} 
{isLoading && <Loading />} 
</div> 
}s 


export default App; 


再 来 看 一 下 组 件 PostList， 它 需要 使 用 postsStore、authStore 和 uiStore 三 个 store， 代 码 如 下 : 


import React, { Component } from "react"; 
import { inject, observer } from "mobx-react"; 
import PostsView from "./PostsView"; 

import PostEditor from "../Post/PostEditor"; 


import "./style.css"; 


@inject ("postsstore", "authStore"， "uiStore") 

@observer 

class PostList extends Component { 
componentDidMount() { 


// 获取 帖子 列表 


this.props.postsSstore.fetchPostList(); 


// 保存 新 建 的 帖子 
handlesave data => { 


this.props.postsStore 
-CreatePost (data) 


-then(() => this.props.uiSsStore.setAddDialogSstatus (false)); 
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]} 


// 取消 新 建 帖子 的 状态 
handleCancel = () => { 


this.props.uistore.setAddDialogstatus (false); 
}; 


// 设置 新 建 帖子 的 状态 
handleNewPost = () => { 


this.props.uiSstore.setAddDialogSstatus (true); 
$2 


render() { 
const { postsStore，authStore，uiStore } = this.props; 
return ( 
<div className="postList"> 
<div> 
<h2> 帖 子 列表 </h2> 
{authstore.userId ? ( 
<button onClick={this.handleNewPost}> 发 帖 </button> 
} LI 
</div> 
{uistore.addDialogOpen ? ( 
<PostEditor onSave={this.handleSave} onCancel={this.handleCancel} /> 
) 去 nurl} 
<PostsView posts={postsstore.posts} /> 
</div> 
); 


} 


export default PostList; 


其 他 组 件 的 改造 也 都 类 似 ， 为 节约 篇 幅 ， 这 里 不 再 一 一 介绍 ， 请 读者 参考 源 代码 。 
11.4 ”MobX 调试 工具 


mobx-react-devtools 是 一 个 用 于 调试 MobX+React 项 目的 工具 ， 它 可 以 追踪 组 件 的 泻 染 以 及 组 
件 依赖 的 可 观测 数据 。 我 们 为 BBS 项 目 添加 这 个 调试 工具 : 


// 安装 


npm install mobx-react-devtools --save-dev 


只 需要 在 开发 环境 下 使 用 调试 工具 ， 安 装 命令 使 用 的 参数 是 --save-dev。 
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将 mobx-react-devtools 提供 的 调试 组 件 添加 到 App 组 件 中 : 


Q@inject ("appSstore") 
Q@observer 
class App extends Component { 
renderDevToo1() { 
// 在 开发 环境 下 ， 添 加 调试 工具 
if (process.env.NODE ENV !== "production") { 


const DevTools = require("mobx-react-devtools") .default; 
return <DevTools />; 


} 


render() { 
const { error, isLoading, removeError } = this.props.appstore; 
const errorDialog = error && ( 


<ModalDialog onClose={removeError}>{error.message || error} 
</ModalDialog> 


); 


return ( 
<div> 
<Router> 
<Switch> 
<Route exact path="/" component={AsyncHome} /> 
<Route path="/login" component={AsyncLogin} /> 


<Route path="/posts" component={AsyncHome} /> 
</Switch> 


</Router> 
{errorDialog} 
{isLoading && <Loading /> 
{/* 添加 Mobx 调试 组 件 */} 
{this.renderDevTool ()} 
</div> 
); 


export default App; 


再 次 运行 程序 ， 界面 右上 角 会 多 出 三 个 小 图 标 , 这 是 mobx-react-devtools 的 功能 键 。 点 击 第 一 
个 图 标 ， 当 组 件 发 生 演 染 行为 时 ， 对 应 的 组 件 会 被 高 亮 显示 ， 高 亮 组 件 右上 角 显 示 的 3 个 数字 分 别 
代表 截至 当前 组 件 泻 染 的 次 数 、 组 件 render 方法 执行 的 时 间 、 组 件 从 render 方法 开始 到 演 染 到 浏 
览 器 界面 使 用 的 时 间 ， 如 图 11-2 所 示 。 
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首页 当前 用 户 : jack 注 条 


帖子 列表 





创建 人 : tom 
更 新 时 间 : 2017-11-18 18:31 


前 端 框架 ， 你 最 爱 蔚 一 个 
而 0 


Web App 的 时 代 已 经 到 来 


创建 人 : steve 
更 新 时 间 ; 2017-11-16 TH58 
巾 0 





创建 人 : jack 
更 新 时 间 : 2017-11-15 16.34 


大 家 一 起 来 讨论 React 吧 
0 | 











图 11-2 


点 击 第 二 个 图 标 后 ， 再 用 鼠标 选择 任意 一 个 组 件 ， 可 以 查看 该 组 件 会 对 哪些 数据 的 变化 做 出 
响应 。 图 11-3 显示 的 是 一 个 PostItem 组 件 实例 所 依赖 的 数据 。 





11-3 


点 击 第 三 个 图 标 ， 控 制 台 会 输出 发 生 的 action、 响 应 的 reaction 等 调试 日 志 信息 。 


11.5 ”优化 建议 


MobX 和 React 结合 使 用 时 ， 有 一 些 常用 的 优化 技巧 可 以 帮助 提高 组 件 的 泻 染 效率 。 
1. 尽 可 能 多 地 使 用 小 组 件 


observer/@observer 包装 的 组 件 会 追踪 render 方法 中 使 用 的 所 有 可 观测 对 象 ， 所 以 组 件 越 小 ， 
组 件 追 踪 的 对 象 越 少 ， 引 起 组 件 重新 演 染 的 可 能 性 也 越 小 。 
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2. 在 单独 的 组 件 中 泻 染 列表 数据 
列表 数据 的 泻 染 是 比较 耗费 性 能 的 ， 尤 其 是 在 列表 数据 量 大 的 情况 下 ， 例 如 : 


Q@observer 
class MyComponent extends Component { 
render() { 
const { todos, user } = this.props; 
return ( 
<div> 
{user.name} 
<ul>{todos.map (todo => <TodoView todo={todo} key={todo.id} />)}</ul> 
</div> 
); 
} 
} 


user.name 的 改变 会 导致 重新 创建 一 个 TodoView 元 素 的 数组 ， 虽 然 这 并 不 会 导致 重复 泻 染 这 
些 TodoView， 但 React 比较 新 旧 TodoView 元 素 的 过 程 本 身 也 很 耗费 性 能 。 所 以 ， 更 好 的 写法 是 : 


@observer 
class MyComponent extends Component { 
render() { 
const { todos, user } = this.props; 
return ( 
<div> 
{user.name} 
<TodosView todos={todos} /> 
</div> 
) 7 
} 
} 


@observer 
class TodosView extends Component { 
render() { 
const { todos } = this.props; 


return <ul>{ftodos .map (todo => <TodoView todo={todo} key={todo.id} />)} 
</ul>; 


} 
} 


3. 尽 可 能 晚 地 解 引 用 (dereference〉 对象 属性 


MobX 通过 追踪 对 象 属性 的 访问 来 追踪 值 的 变化 ， 所 以 在 层级 越 低 的 组 件 中 解 引用 对 象 属性 ， 
由 这 个 属性 的 变化 导致 的 重新 泻 染 的 组 件 的 数量 就 越 少 。( 只 有 解 引用 对 象 属性 的 组 件 及 其 子 组 件 
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会 重新 泻 染 ) 。 例 如 : 
// 方式 1 


Q@observer 
class DisplayName extends Component { 
render() { 
const {person} = this.props 


return <div>{person.name}<div/> 


} 


class MyComponent extends Component { 
render() { 
const {person} = this.props 


return <DisplayName person={person} /> 


} 
// 方式 2 


Qobserver 
class DisplayName extends Component { 
render() { 
const {name} = this.props 


return <div>{name}<div/> 


} 


class MyComponent extends Component { 
render() { 
const {person} = this.props 


return <DisplayName name={person.name} /> 


} 


person 是 一 个 可 观测 对 象 ， 对 于 方式 1， 当 person 的 属性 name 发 生变 化 时 ，DisplayName 会 
自动 重新 泻 染 ， 而 不 需要 通过 父 组 件 MyComponent 的 重新 泻 染 来 触发 。 对 于 方式 2，DisplayName 
使 用 的 是 name 这 个 值 ， 是 不 可 观测 的 ， 因 此 ， 要 想 让 DisplayName 重新 泻 染 ， 首 先 必 须 让 
DisplayName 的 父 组 件 MyComponent 重新 泻 染 ， 这 样 就 导致 更 多 组 件 会 发 生 重复 泻 染 。 

但 方式 2 更 容易 理解 ,对 于 DisplayName 组 件 仅 需要 接收 name 作为 属性 就 足够 了 ,接收 person 
作为 属性 反而 有 些 多 余 。 为 了 兼顾 效率 和 可 读 性 ， 可 以 这 样 实现 : 


const PersonNameDisplayer = observer(({ props }) => <DisplayName 
name={props.person.name} />) 

这 里 新 增 了 一 个 组 件 PersonNameDisplayer， 由 这 个 组 件 负责 泻 染 DisplayName ， 
PersonNameDisplayer 会 自动 响应 name 的 变化 ， 重 新 渲染 DisplayName 组 件 ， 同 时 DisplayName 
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组 件 仍然 只 需要 接收 name 属性 即 可 。 本 质 上 还 是 使 用 小 组 件 的 思路 进行 优化 。 
4. 提前 绑 定 函 数 
例如 : 


Q@observer 


class MyComponent extends Component { 
render() { 


return <MyWidget onCclick={() => { alert('hi') }} /> 
} 
} 


这 种 写法 ，MyComponent 的 render 方法 每 次 被 调用 时 ，MyWidget 的 onClick 属性 的 值 都 是 一 
个 新 的 函数 ， 导 致 MyWidget 的 render 方法 一 定 会 被 重新 调用 ， 而 无 论 其 他 属性 是 否 发 生变 化 ， 
MobX 对 组 件 泻 染 做 的 优化 工作 都 会 浪费 。 更 好 的 写法 是 : 

Qobserver 


class MyComponent extends Component { 
handleclick = () => { 
alert ('hi') 
} 


render() { 


return <MyWidget onClick={this.handleClick} /> 
人 


} 


本 节 介 绍 的 这 几 种 优化 方法 虽然 看 似 很 基础 ， 但 读者 真正 掌握 并 理解 这 些 优 化 方法 后 ， 相 信 
会 对 MobX 有 更 加 深入 的 理解 。 


11.6 ”Redux 与 MobX 比较 


在 学 习 完 Redux 和 MobX 后 ， 很 多 读者 可 能 会 不 知道 在 项 目 中 应 该 选择 使 用 哪 一 个 ， 毕 竟 
这 两 个 库 都 是 非常 优秀 的 状态 管理 解决 方案 。 我 们 从 以 下 几 个 方面 对 比 Redux 与 MobX。 


1. Store 


Redux 是 单一 数据 源 ， 整 个 应 用 共享 一 个 store 对 象 ， 而 MobX 可 以 使 用 多 个 store。 因 此 ， 
MobX 可 以 将 应 用 逻辑 拆 分 到 不 同 store 中 ， 而 Redux 需要 通过 拆 分 reducer 来 拆 分 应 用 逻辑 。 当 


应 用 越 来 越 复杂 时 ， 单 一 store 可 以 更 方便 地 在 不 同 组 件 间 共享 ， 而 维护 多 store 间 的 数据 共享 、 
相互 引用 关系 会 变 得 很 复杂 。 
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2. State 


Redux 使 用 普通 JavaScript 对 象 存储 state， 并 且 state 是 不 可 变 的 ， 每 次 状态 的 变更 都 必须 重 
新 创建 一 个 新 的 state。MobX 中 的 state 是 可 观测 对 象 ， 并 且 state 是 可 以 被 直接 修改 的 ，state 的 变 
化 会 自动 触发 使 用 它 的 组 件 重新 泻 染 。 此 外 , Redux 的 state 结构 应 该 尽量 扁平 化 , 减少 能 套 层级 ， 
而 MobX 的 state 结构 可 以 任意 嵌 套 ， 从 这 一 点 上 来 说 ，MobX 的 state 更 容易 直接 被 组 件 使 用 。 


3. 编程 范式 


Redux 是 基于 函数 式 的 编程 思想 ，MobX 是 面向 对 象 的 编程 思想 ， 因 此 ， 对 于 传统 面向 对 象 
的 开发 者 而 言 ，MobX 更 加 友好 。Redux 有 严格 的 规范 约束 ， 而 MobX 更 加 灵活 ， 开 发 者 可 以 更 
加 随意 的 编写 代码 。 但 对 于 大 型 项 目 来 说 ， 有 严格 的 规范 更 易于 后 期 的 维护 和 扩展 。 


4. 代码 量 


因为 Redux 有 严格 的 规范 ， 所 以 往往 需要 写 更 多 的 代码 来 执行 这 些 规范 。 例 如 ， 实 现 一 个 特 
性 需要 修改 action、reducer、 组 件 等 多 个 地 方 ， 而 MobX 只 需要 修改 用 到 的 store 和 视图 组 件 。 


5. 学 习 曲 线 


因为 MobX 的 面向 对 象 的 编程 思想 以 及 没有 太 多 规范 约束 ， 它 的 学 习 曲 线 更 加 平缓 ， 更 易于 
上 手 。 对 于 不 熟悉 函数 式 编程 的 开发 者 ，Redux 是 比较 难 学 习 的 ， 加 上 它 的 诸多 规范 限制 ， 更 增加 
了 初学 者 的 学 习 难 度 。 


基于 以 上 比较 ,一 般 建议 当 小 型 团队 需要 开发 相对 简单 的 应 用 时 ， 可 以 选择 使 用 MobX, 它 易 
学 习 、 上 手 快 、 代 码 量 少 ， 当 团队 规模 较 大 或 应 用 复杂 度 较 高 时 ， 可 以 选择 使 用 Redux， 它 严格 的 
规范 有 利于 保障 项 目 代码 的 可 维护 性 和 可 扩展 性 。 当 然 ， 技术 的 选择 是 没有 绝对 的 ， 最 终 都 需要 根 
据 实际 业务 场景 做 选择 。 





11.7 ”本章 小 结 


本 章 结合 项 目 实例 ， 从 项 目 结构 的 组 织 方式 、store 的 设计 等 方面 详细 介绍 了 如 何在 真实 项 目 
中 使 用 MobX， 还 介绍 了 MobX 应 用 中 常用 的 调试 工具 和 常用 的 性 能 优化 方法 ， 最 后 对 Redux 与 
MobX 进行 了 比较 ， 希 望 通过 比较 能 给 读者 在 如 何 选择 上 提供 一 些 建议 。 


